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

时间:2021-12-26 00:11:15

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后引用否则无效

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

3.插件的代码部分

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

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

 

4.插件的部分属性说明

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

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

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

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

 

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

也是没有办法,如图:

  这张是没有加accept 属性

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

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

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

  3.部分要使用的方法

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

 

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

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

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

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

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

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

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

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

 

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

 5.Controller中的代码

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

 

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

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

 

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