详解bootstrap-fileinput文件上传控件的亲身实践
经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过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、使用
1
2
3
|
< div class = "upload-wrap" > < input type = "file" id = "md5File" multiple = "multiple" name = "test" /> </ div > |
将其设置为multiple,可以多选文件进行上传。
js文件操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$( '#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,就是为了让两个文件同步上传,后台用数组一次接收。同步和异步上传成功结果处理的方法都是不同的
异步上传错误结果处理
1
2
3
|
$( '#uploadfile' ).on( 'fileerror' , function (event, data, msg) { }); |
异步上传成功结果处理
1
2
3
|
$( "#uploadfile" ).on( "fileuploaded" , function (event, data, previewId, index) { }) |
同步上传错误结果处理
1
2
3
|
$( '#uploadfile' ).on( 'filebatchuploaderror' , function (event, data, msg) { }); |
同步上传成功结果处理
1
2
3
|
$( '#uploadfile' ).on( 'filebatchuploadsuccess' , function (event, data, previewId, index) { }); |
其实本来不难,但是我对于同步上传成功结果处理的函数一直没有处理对,打断点也捕捉不到,我也很纳闷在做的时候,我在很多地方看到的是如下的处理方法:
我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})
这个方法,后来才恍然大悟,把filepreupload改成了filebatchuploadsuccess,最终才实现了同步上传成功结果处理。也算是一个小坑,被人误导,自己也没有看清楚。
这里面还有一个参数:layoutTemplates,这个参数是对上传的那多个文件里面操作
如上图的红色圈圈,可以对这几个icon进行设置
1
2
3
4
|
layoutTemplates: { actionUpload: '' //就是让文件上传中的文件去除上传按钮 // actionDelete: '',//去除删除按钮 }, |
详解bootstrap-fileinput文件上传控件的亲身实践的更多相关文章
- bootstrap-fileinput文件上传控件的亲身实践
经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错.赶紧就撸起来了. 1.下载压缩包.插件地址https://githu ...
- ***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...
- jquery文件上传控件 Uploadify
(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
- 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
- jquery文件上传控件 Uploadify 问题记录
Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法
今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...
- 对FileUpload文件上传控件的一些使用方法说明
//创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
- 符合BME风格的弹窗\菜单\表格\文件上传控件
1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......
随机推荐
- Android NDK学习(二):编译脚本语法Android.mk和Application.mk
一.Android.mk Android.mk分为一下几部分: LOCAL_PATH:= $(call my-dir), 返回当前文件在系统中的路径,Android.mk文件开始时必须定义该变量. i ...
- 14.不同条目的listview
分类界面 整个项目的逻辑就是这样的 CategoryInfo public class CategoryInfo { private String title; private String url ...
- Kali学习笔记23:Web渗透简介
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 我这里先说几句: 其实从缓冲区溢出到Web渗透之间还有 ...
- [Postman]查找替换(5)
在邮差中查找和替换 在Postman中快速轻松地查找和替换API项目中的文本.Postman应用程序使您能够执行全局查找和替换操作,该操作可在其各种组件(如集合,环境,全局和打开选项卡)中无缝工作.这 ...
- SpringCache实战遇坑
1. SpringCache实战遇坑 1.1. pom 主要是以下两个 <dependency> <groupId>org.springframework.boot</g ...
- GITHUB(github)初级使用
Github顾名思义是一个Git版本库的托管服务,是目前全球最大的软件仓库,拥有上百万的开发者用户,也是软件开发和寻找资源的最佳途径,Github不仅可以托管各种Git版本仓库,还拥有了更美观的Web ...
- Xamarin.Android 上中下布局
xml代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:and ...
- C++版 - LeetCode 144. Binary Tree Preorder Traversal (二叉树先根序遍历,非递归)
144. Binary Tree Preorder Traversal Difficulty: Medium Given a binary tree, return the preorder trav ...
- 从零基础到拿到网易Java实习offer,谈谈我的学习经验
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- 从面试连跪到收割offer,回顾我的春招面试历程(研发岗位)
本文首发于自微信公众号[程序员江湖] 作者How 2 Play Life,985 软件硕士,阿里 Java 研发工程师,在技术校园招聘.自学编程.计算机考研等方面有丰富经验和独到见解,目前致力于分享程 ...