最好用的Bootstrap fileinput.js文件上传组件
本篇介绍如何使用bootstrap fileinput.js（最好用的文件 上传 组件）来进行图片 的展示，上传 ，包括 springMVC后端文件 保存。
一、demo
,这是其官方文档，里面有下载地址。
三、页面
1. type=file和class=projectfile，指明其为input file类型。
2. name指定其在后台的获取key。
3. value指定其在展示的时候图片路径。
四、页面加载时执行
if (imageurl) {
var op = $.extend({
initialPreview : [ // 预览图片的设置
"
",]
},projectfileoptions);
$(this).fileinput(op);
1. 通过jquery获取对应的input file，然后执行fileinput方法。
2. showUpload 设置是否有上传按钮。
3. language指定汉化
4. allowedFileTypes 、allowedFileExtensions 不知道为什么没有起到效果？
5. maxFileSize 指定上传文件大小
五、带file文件的form表单通过ajax提交
我们先来看带file的form表单布局。
<div class="form-group">
<label for="" class="col-md-1 control-label">项目封面
<div class="col-md-10 tl th">
1.enctype=”multipart/form-data”必不可少。
2.onsubmit=”return iframeCallback(this,pageAjaxDone)”方法，通过ajax提交表单（iframeCallback），并且上传成功后调用回调函数（pageAjaxDone）进行下一步操作。
关于iframeCallback的介绍，请参照，这里就不多做介绍了。
然后我们来介绍一下回调函数 pageAjaxDone。
rush:js;">
function pageAjaxDone(json) {
YUNM.debug(json);
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) {提示
if (YUNM.callbackType.confirmTimeoutForward == json.callbackType) {sst imeout(msg,function() {
其主要的功能 就是通过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 dis tractions。”就显得特别珍贵，而“ihchenchen”则充满这种精神！
六、解惑allowedFileTypes 、allowedFileExtensions
之前困惑为什么bootstrap fileinput为什么设置了这两个属性 后，没有效果 ，其实是我自己的误解，如今经过一番痛彻的领悟后恍然大悟！
①、allowedFileTypes
allowedFileTypes
array the list of allowed file types for upload. This by default is set to null which means the plugin supports all file types for upload. If an invalid file type is found,then a validation error message as set in msgi nvalidFileType will be raised. The following types as set in filetypesetting s are available for setup.
[‘image',‘html',‘text',‘video',‘audio ',‘flash',‘object']
先从“allowedFileTypes”说起，该属性 告知我们文件 的选择类型，那么我们很容易想到这样的画面：
文件”处不是“所有文件 ”，而是“image”之类的。显然这样的逻辑并没有错，但却不适合bootstrap fileinput！
那么，这个时候我就很容易认为“allowedFileTypes” 没有起到作用！
但请看下图：
吼吼，原来是在你选择了文件 后发生的类型检查！
②、allowedFileTypes工作原理
rush:js;">
$(this).fileinput({
showUpload : false,allowedPreviewTypes: ['image'],allowedFileTypes: ['image'],allowedFileExtensions: ['jpg','png'],});
通过fileinput方法 我们加载一个 bootstrap fileinput组件，那么其内部是如何实现allowedFileTypes的呢？
通过在fileinput.js文件 中搜索 “allowedFileTypes”关键字，我们得到如下代码 ：
rush:js;">
var node = ctr + i,previewId = previewInitId + "-" + node,isText,file = files[i],caption = self.slug(file.name),fileSize = (file.size || 0) / 1000,checkFile,fileExtExpr = '',previewData = objUrl.
createObjectURL (file),fileCount = 0,j,msg,typ,chk,fileTypes = self.allowedFileTypes,strTypes = isEmpty(fileTypes) ? '' : fileTypes.join(','),fileExt = self.allowedFileExtensions,strExt = isEmpty(fileExt) ? '' : fileExt.join(',');
然后我们继续看到如下的代码 ：
rush:js;">
if (!isEmpty(fileTypes) && isArray(fileTypes)) {
for (j = 0; j < fileTypes.length; j += 1) {
typ = fileTypes[j];
checkFile = settings[typ];
chk = (checkFile !== undefined && checkFile(file.type,caption));
fileCount += isEmpty(chk) ? 0 : chk.length;
}
if (fileCount === 0) {
msg = self.m
sgi nvalidFileType.replace('{name}',caption).replace('{types}',strTypes);
self.isError = throwError(msg,file,previewId,i);
return;
}
}
我们可以发现，文件 类型的检查是发生在checkFile方法 上，那么checkFile方法 到底做了些什么呢？
rush:js;">
defaultFile
typesetting s = {
image: function (vType,vName) {
return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(png|jpe?g)$/i);
},...
以上就是checkFile的内容 。
也就是说当我们指定allowedFileTypes: ['image'],时，就会进行image的类型检查。
显然我们选择的txt文件 不属于Image类 型，那么就会匹配不上，出现以上界面。
同时，该方法 告诉我们，当不指定allowedFileTypes: ['image'],，只指定allowedFileExtensions: ['jpg',就会执行vName.match(/\.(png|jpe?g)$/i)，也就是文件 后缀类型的检查，这点很关键啊，为我们接下来介绍“allowedFileExtensions”奠定基础。
③、allowedFileExtensions什么时候起作用
上节我们讨论完“allowedFileTypes”，捎带说了“allowedFileExtensions”，那么如何让后缀进行check呢？
rush:js;">
$(this).fileinput({
showUpload : false,});
fileinput组件此时指定的属性 如上，没有了“allowedFileTypes”，并且指定允许的后缀类型为“[‘jpg',‘png']”，也就是说，假如我们选择了gif的图片 就会出现错误 提示 。
错误 预期的发生了，那么请特别注意：
rush:js;">
image: function (vType,
fileinput.js文件 中原始的代码 如下：
rush:js;">
image: function (vType,vName) {
return (vType !== undefined) ? vType.match('image.*') : vName.match(/\.(gif|png|jpe?g)$/i);
},
Image类 型的后缀当然默 认包含了gif，我只是为了举例说明，代码 做了调整，请注意！
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
![](" + imageurl + ")
",]
