文件上传控件bootstrap-fileinput的使用

1.插件下载地址：https://github.com/kartik-v/bootstrap-fileinput

2.插件的引用

　　需要引用jquery

　　需要结合bootstrap使用，即页面需要引入bootstrap相关js和css文件

　　引用fileinput.js 和css

　　中文需要引用js/locales/zh.js

　　需要主题样式时引用themes下相关文件夹中的js和css

　　tips：最好以上按顺序引用，免得出现莫名其妙的问题，比如zh.js必须在fileinput.js后引用否则无效

3.插件的代码部分

 

4.插件的部分属性说明

　　1.multiple表示允许同时上传多个文件，class=“file-loading”表示标签的样式。这里很重要，如果class="file"，则中文化不能生效。

　　2.accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。这个属性和插件allowedFileExtensions属性看起来一样但是插件的

　　allowedFileExtensions属性只是你选择了文件类型之后他会提示你禁止上传,如图

 

　　而accept 属性则是在点击选择文件之后,文件框里只会出现你写在accept 属性的后缀名的文件.可以在一开始就避免用户选择错误的文件类型,当然如果直接拖进控件,那

也是没有办法,如图:

　　这张是没有加accept 属性

 　　这张是加了accept="image/*,.pdf,.xls,.xlsx,.docx,.doc"的图片

　　

　　3.部分要使用的方法

 

　　4.有的想去除掉控件中的一些按钮,如图

 

　　showUpload,showRemove属性是是否显示红色的部分的移除,上传按钮是否显示.

　　而黑色部分按钮的隐藏显示则是由fileActionSettings这个属性来决定的

　　具体的内容请看http://plugins.krajee.com/file-input/plugin-options#fileActionSettings

　　写一个class内容为display:none;然后把这个class赋值给对应的属性就ok了.如图

　　　　

 

 　　效果如第三张图,图片右下角删除按钮已被禁用掉.

 5.Controller中的代码

 

 

 

 ok,这篇文章只是介绍了一个大概的部分.具体的也可参考网上大佬们的介绍.

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/yan0720/p/9717101.html