最好用的Bootstrap fileinput.js文件上传组件

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示，上传，包括springMVC后端文件保存。

一、演示

二、插件引入

链接类型='text/css' rel='样式表href=' $ { CTX }/组件/文件输入/CSS/文件输入。CSS '/脚本类型=' text/JavaScript ' src=' http : $ { CTX }/组件/文件输入/js/文件输入。js /脚本脚本类型=' text/JavaScript ' src=' http : $ { CTX }/组件/文件输入/js/文件输入_locale_zh.js

http://plugins.krajee.com/file-input,这是其官方文档，里面有下载地址。

三、页面

输入类型=' file ' name=' image ' class=' project file ' value=' $ { deal。图像} '/

1.类型=文件和class=projectfile，指明其为输入文件类型。 2.名字指定其在后台的获取钥匙.3.价值指定其在展示的时候图片路径。

四、页面加载时执行

项目文件选项： { show upload : false，showRemove : false，language : 'zh '，allowedpreview类型：[' image ']，allowedfile扩展名：[' jpg '，' png '，' gif' ]，maxFileSize : 2000，}，//文件上传框$(“input[class=project file]”).每个(function() { var imageurl=$(this)).attr(' value ')；if (imageurl) { var op=$ .extend({ initialPreview : [ //预览图片的设置img src=' imageurl ' ' class=' file-preview-image ' '，] }，project file options)；$(这个)。文件输入(op)；} else { $(this).文件输入(项目文件选项)；}});1.通过jquery获取对应的输入文件，然后执行文件输入方法。 2.显示上传设置是否有上传按钮。 3.语言指定汉化4.允许文件类型、允许文件扩展不知道为什么没有起到效果？5.maxFileSize指定上传文件大小

五、带文件文件的形式表单通过创建交互式、快速动态网页应用的网页开发技术提交

我们先来看带文件的形式表单布局。

form class=' form-需要水平-validate' action='${ctx}/save？callbackType=confirtimeoutforward ' enctype=' multipart/form-data '方法=' post ' on submit=' return iframe callback(this，pageAjaxDone)' div class=' form-group '标签为=' class=' col-MD-1控件-标签'项目封面/label div class='col-md-10 tl th '输入类型=' file ' name=' image ' class=' project file ' value=' $ { deal。image } '/p class=' help-block '支持jpeg、JPEG、png、gif格式，大小不超过2.0M/p/div/div class='表单-组文本-中心' div class=' col-MD-10 col-MD-offset-1 '按钮类型='提交'=' BTN BTN-初选BTN-LG '保存/button/div/div/form 1。enctype=" multipart/form-data "必不可少2 .onsubmit=" return iframeCallback(this，pageAjaxDone)"方法，通过创建交互式、快速动态网页应用的网页开发技术提交表单(iframeCallback)，并且上传成功后调用回调函数(pageAjaxDone)进行下一步操作。

关于内联框架回调的介绍，请参照summernote所在形式表单的数据提交，这里就不多做介绍了。

然后我们来介绍一下回调函数pageAjaxDone。

函数PageAJaxDone(JSON){ YUNM。调试(JSON)；好吃。Ajax done(JSON)；if(JSON[YUM。钥匙。状态码]==YUNM。状态代码。ok){ var msg=JSON[YUM。钥匙。消息]；//弹出消息提示好吃。调试(msg)；if(YUNM。回调TYPe。确认timeoutforward==JSON。回调类型){ $ .showSuccessTimeout(msg，function(){ window。位置=JSON。转发URl});} }}其主要的功能就是通过ajaxDone方法处理服务端传递过来的错误消息，假如说服务端操作成功，那么会显示提示信息，进而跳转到对应的url。

六、springMVC保存图片

请参照后端springMVC文件保存

ps:以上博客留了一个小疑问，一直没有去研究，直到有位非常棒的小伙伴给了我如下的提醒：

ihchenchen昨天13:42发表[回复] allowedFileTypes、allowedFileExtensions我知道为什么没有效果，因为fileinput()方法调用了两次，一次在fileinput.js里面最后几行，还有一次就是你自己写的（这个)。fileinput()。在fileinput.js里的是没有设置允许文件类型、允许文件扩展值的。有两种方法可以改：1、把fileinput.js里的最后几行调用注释掉。2、全部使用"数据"的方法来做，不写（这个)。fileinput()。

对于ihchenchen善意的提醒，我非常的感谢，虽然他提供的解释并没有解决我的疑问，但是我很喜欢这样有互动的技术交流，之前写很多博客，基本上很少发生这样善意并且行之有效的回答。这让我想起中国程序员和外国程序员，里面的故事让人震撼之余，捎带着些许的惭愧。那么如何做到"问问题，得到答案，不分心。"就显得特别珍贵，而" ihchenchen "则充满这种精神！

六、解惑允许文件类型、允许文件扩展

之前困惑为什么引导文件输入为什么设置了这两个属性后，没有效果，其实是我自己的误解，如今经过一番痛彻的领悟后恍然大悟！

、允许文件类型

允许文件类型数组允许上传的文件类型列表。默认情况下，这被设置为空，这意味着插件支持上传的所有文件类型。如果发现无效的文件类型，将会引发在msgInvalidFileType中设置的验证错误消息。文件类型设置中设置的以下类型可用于设置。

['图像，' html '，'文本','视频','音频，'闪光'，'对象]

先从"允许文件类型"说起，该属性告知我们文件的选择类型，那么我们很容易想到这样的画面：

也就是说，我们希望此时的"所有文件"处不是"所有文件",而是"图像"之类的。显然这样的逻辑并没有错，但却不适合引导文件输入！

那么，这个时候我就很容易认为"允许文件类型"没有起到作用！

但请看下图：

吼吼，原来是在你选择了文件后发生的类型检查！

、允许文件类型工作原理

$(这个)。文件输入({ show upload : false，showRemove : false，language : 'zh '，allowedpreview类型：[' image ']，allowedfile类型：[' image ']，allowedfile扩展名3360[' jpg '，' png']，maxFileSize : 2000，})；通过文件输入方法我们加载一个引导文件输入组件，那么其内部是如何实现允许文件类型的呢？

通过在fileinput.js文件中搜索"允许文件类型"关键字，我们得到如下代码：

var node=CTR . I，previveid=previveitid '-' node，isText，file=files[i]，caption=self.slug(file.name)，fileSize=(file.size || 0)/1000，checkFile，fileExtExpr=' '，previewData=objurl。createobjecturl(文件)，fileCount=0，j，msg，typ，chk，fileTypes=self。allowedfiletypes，strTypes=isEmpty(fileTypes)？ fileTypes.join('，')，file ext=self。' allowedfilextensions，strExt=isEmpty(filext)？': fileExt.join('，')；然后我们继续看到如下的代码：

if(！isEmpty(fileTypes)isArray(fileTypes)){ for(j=0；j fileTypes . length j=1){ typ=fileTypes[j]；checkFile=设置[典型值];chk=(checkFile！==未定义的检查文件(file.type，caption))；fileCount=isEmpty(chk)？0 :克朗。长；} if(fileCount===0){ msg=self。msginvalidfiletype。替换(' { name } '，标题)。replace('{types} '，strTypes)；self.isError=throwError(msg，file，previewId，I)；返回；} }我们可以发现，文件类型的检查是发生在检查文件方法上，那么检查文件方法到底做了些什么呢？

defaultFileTypeSettings={ image : function(vType，vName) { return (vType！==未定义)?vType.match('image .*): vname。匹配(/\ .(png|jpe？g)$/I)；},以上就是检查文件的内容。

也就是说，当我们指定allowedFileTypes: ['image']时，将执行image的类型检查。很明显，我们选择的txt文件不属于图像类型，所以不会匹配，会出现上面的界面。同时，这个方法告诉我们，当不指定allowedFileTypes: ['image']并且只指定allowedfilextensions 3360[' jpg '，' png']时，vName.match(/\。(png|jpe？G)$/i)，也就是文件后缀类型的检查，这一点非常关键，也为我们接下来介绍“allowedFileExtensions”奠定了基础。3.allowedFileExtensions什么时候可以工作

在最后一节中，我们讨论了“allowedFileTypes”，顺便说了“allowedFileExtensions”，那么如何检查后缀呢？

$(这个)。file input({ show upload : false，showRemove : false，language : 'zh '，allowedpreviewstypes :[' image ']，allowedfile extensions 3360[' jpg '，' png']，maxFileSize : 2000，})；此时fileinput组件指定的属性如上，没有“allowedFileTypes”，允许的后缀类型指定为“['jpg '，' png']”，也就是说如果我们选择gif图片，会出现错误提示。

出现了错误的预期，因此请特别注意：

image:函数(vType，vName) { return (vType！==未定义)？vType.match('image。*): vname . match(/\。(png|jpe？g)$/I)；}，原始代码在}，fileinput.js文件如下：

image:函数(vType，vName) { return (vType！==未定义)？vType.match('image。*): vname . match(/\。(gif|png|jpe？g)$/I)；}，当然后缀为}，图像类型默认包含gif。我只想说明代码已经调整好了。请注意！

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。