详解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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
Jquery实现获取子元素的方法分析
Aug 24 jQuery
VUE 自定义组件模板的方法详解
Aug 30 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 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使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python装饰器用法实例总结
2018/02/07 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python 字符串格式化的示例
2020/09/21 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
村委会贫困证明
2014/01/14 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers
如何在Python中妥善使用进度条详解
2022/04/05 Python