详解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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
vue时间格式化实例代码
Jun 13 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 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
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
PHP 高手之路(一)
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
解决vue v-for src 图片路径问题 404
2019/11/12 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python实现网站注册验证码生成类
2017/06/08 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
如何用python处理excel表格
2020/06/09 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
企业法人代表授权委托书
2014/10/02 职场文书
小学老师对学生的评语
2014/12/29 职场文书
人生遥控器观后感
2015/06/11 职场文书
《社戏》教学反思
2016/02/22 职场文书
穷人该怎么创业?谨记以下几点
2019/07/11 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python