详解bootstrap-fileinput文件上传控件的亲身实践


Posted in Javascript onMarch 21, 2019

经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错。赶紧就撸起来了。

1、下载压缩包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ,下载压缩包解压之后,拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js,因为这款插件默认的语言是英语。把这几个文件引入进页面

2、文件的引入顺序

  • 引入bootstrap.min.css
  • 引入fileinput.min.css
  • 引入jquery,版本最好2以上
  • 引入bootstrap.min.js
  • 引入fileinput.min.js
  • 引入中文插件zh.js

3、使用

<div class="upload-wrap">
   <input type="file" id="md5File" multiple="multiple" name="test" />
</div>

将其设置为multiple,可以多选文件进行上传。

js文件操作

$('#md5File').fileinput({
    language: 'zh',
    uploadUrl: 'http://localhost:8080/sign',
    showCaption: true,//是否显示被选文件的简介
    showUpload: true,//是否显示上传按钮
    showRemove: true,//是否显示删除按钮
    showClose: true,//是否显示关闭按钮
    enctype: 'multipart/form-data',
    uploadAsync:false, //false 同步上传,后台用数组接收,true 异步上传,每次上传一个file,会调用多次接口 
    layoutTemplates: {
      actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
    },
    browseClass: 'btn btn-primary',
    maxFileCount: 2,
    minFileCount : 2,
  }).on('filebatchuploadsuccess',function(res) {
    console.log(res);
  });

需求是让选择两个文件进行上传,而且只能发起一次请求,所以这里让maxFileCount和minFileCount都设置为2,uploadAsync设置为false,就是为了让两个文件同步上传,后台用数组一次接收。同步和异步上传成功结果处理的方法都是不同的

异步上传错误结果处理

$('#uploadfile').on('fileerror', function(event, data, msg) {

});

异步上传成功结果处理

$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {

})

同步上传错误结果处理

$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {

});

同步上传成功结果处理

$('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) { 

});

其实本来不难,但是我对于同步上传成功结果处理的函数一直没有处理对,打断点也捕捉不到,我也很纳闷在做的时候,我在很多地方看到的是如下的处理方法:

详解bootstrap-fileinput文件上传控件的亲身实践

我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})这个方法,后来才恍然大悟,把filepreupload改成了filebatchuploadsuccess,最终才实现了同步上传成功结果处理。也算是一个小坑,被人误导,自己也没有看清楚。

这里面还有一个参数:layoutTemplates,这个参数是对上传的那多个文件里面操作

详解bootstrap-fileinput文件上传控件的亲身实践

如上图的红色圈圈,可以对这几个icon进行设置

layoutTemplates: {
      actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery实现购物车表单自动结算效果实例
Aug 10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解 vue.js用法和特性
Oct 15 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 #Javascript
javascript中call()、apply()的区别
Mar 21 #Javascript
vue实现微信获取用户信息的方法
Mar 21 #Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 #Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 #Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 #Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 #Javascript
You might like
php数据库配置文件一般做法分享
2012/07/07 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
Delphi工程师笔试题
2013/09/21 面试题
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python