详解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 相关文章推荐
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
JS动态图片的实现方法完整示例
Jan 13 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
Python缩进和冒号详解
2016/06/01 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
简单了解python的内存管理机制
2019/07/08 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
2014年工程师工作总结
2014/11/25 职场文书
接收函
2019/04/22 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis