本篇介绍如何使用bootstrap fileinput.js（最好用的文件上传组件）来进行图片的展示，上传，包括springMVC后端文件保存。
一、demo
二、插件引入
<link type="text/css" href="https://www.jb51.net/${ctx}/components/fileinput/css/fileinput.css" />
<script type="text/javascript" src="https://www.jb51.net/${ctx}/components/fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="https://www.jb51.net/${ctx}/components/fileinput/js/fileinput_locale_zh.js"></script>
三、页面
<input type="file" value="${deal.image}"/>
1. type=file和class=projectfile，指明其为input file类型。
2. name指定其在后台的获取key。
3. value指定其在展示的时候图片路径。
四、页面加载时执行
projectfileoptions : { showUpload : false, showRemove : false, language : 'zh', allowedPreviewTypes : [ 'image' ], allowedFileExtensions : [ 'jpg', 'png', 'gif' ], maxFileSize : 2000, }, // 文件上传框 $('input[class=projectfile]').each(function() { var imageurl = $(this).attr("value"); if (imageurl) { var op = $.extend({ initialPreview : [ // 预览图片的设置 "<img src='" + imageurl + "'>", ] }, projectfileoptions); $(this).fileinput(op); } else { $(this).fileinput(projectfileoptions); } });
1. 通过jquery获取对应的input file，然后执行fileinput方法。
2. showUpload 设置是否有上传按钮。
3. language指定汉化
4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？
5. maxFileSize 指定上传文件大小
五、带file文件的form表单通过ajax提交
我们先来看带file的form表单布局。
<form action="${ctx}/save?callbackType=confirmTimeoutForward" enctype="multipart/form-data" method="post" onsubmit="return iframeCallback(this, pageAjaxDone)"> <div> <label for="">项目封面</label> <div> <input type="file" value="${deal.image}" /> <p>支持jpg、jpeg、png、gif格式，大小不超过2.0M</p> </div> </div> <div> <div> <button type="submit">保存</button> </div> </div> </form>
1.enctype=”multipart/form-data”必不可少。
2.onsubmit=”return iframeCallback(this, pageAjaxDone)”方法，通过ajax提交表单（iframeCallback），并且上传成功后调用回调函数（pageAjaxDone）进行下一步操作。
关于iframeCallback的介绍，请参照，这里就不多做介绍了。
然后我们来介绍一下回调函数pageAjaxDone。
function pageAjaxDone(json) { YUNM.debug(json); YUNM.ajaxDone(json); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { var msg = json[YUNM.keys.message]; // 弹出消息提示 YUNM.debug(msg); if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) { $.showSuccessTimeout(msg, function() { window.location = json.forwardUrl; }); } } }
其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显示提示信息，进而跳转到对应的url。
六、springMVC保存图片
请参照
ps：以上博客留了一个小疑问，一直没有去研究，直到有位非常棒的小伙伴给了我如下的提醒：
ihchenchen昨天 13:42发表 [回复] allowedFileTypes 、allowedFileExtensions 我知道为什么没有效果，因为fileinput()方法调用了两次，一次在fileinput.js里面最后几行，还有一次就是你自己写的(this).fileinput()。在fileinput.js里的是没有设置allowedFileTypes、allowedFileExtensions值的。有两种方法可以改：1、把fileinput.js里的最后几行调用注释掉。2、全部使用“data−”的方法来做，不写(this).fileinput()。
对于ihchenchen善意的提醒，我非常的感谢，虽然他提供的解释并没有解决我的疑问，但是我很喜欢这样有互动的技术交流，之前写很多博客，基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员，里面的故事让人震撼之余，捎带着些许的惭愧。那么如何做到“Ask questions, get answers, no distractions。”就显得特别珍贵，而“ihchenchen”则充满这种精神！
六、解惑allowedFileTypes 、allowedFileExtensions
之前困惑为什么bootstrap fileinput为什么设置了这两个属性后，没有效果，其实是我自己的误解，如今经过一番痛彻的领悟后恍然大悟！
①、allowedFileTypes