详解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.文件上传控件 笔记补充......
随机推荐
- 基于HTTP的长轮询简单实现
Web客户端与服务器之间基于Ajax(http)的常用通信方式,分为短连接与长轮询. 短连接:客户端和服务器每进行一次HTTP操作,就建立一次连接,任务结束就中断连接. 在长轮询机制中,客户端像传统轮 ...
- SpringMVC框架三:参数绑定
这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...
- insert update delete 语法 以及用法
insert update delete 被称为 数据定义语句语句 也就是数据的增加 修改 删除 其中不包括查询 譬如: create database -创建数据库 alter database - ...
- LeetCode: 2_Add Two Numbers | 两个链表中的元素相加 | Medium
题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...
- SpringBoot整合Mybatis完整版
喜欢的朋友可以关注下,粉丝也缺. 自从Spring推出Boot,Cloud系列之后,一度成为热门的框架,现在大部分的招聘要求都要有相关的开发经验,借此我在这里就给大家分享一下如何玩转SpringBoo ...
- 安装MySQL时候最后一步报无法定位程序输入点fesetround于动态链接库MSVCR120.dll
今天在装MySQL时到最后一步出现了一个问题[报无法定位程序输入点fesetround于动态链接库MSVCR120.dll]这是由什么原因引起的呢,其实是缺少一个vcredist_x64.exe插件 ...
- [EXP]Microsoft Windows 10 (Build 17134) - Local Privilege Escalation (UAC Bypass)
#include "stdafx.h" #include <Windows.h> #include "resource.h" void DropRe ...
- 程序员周末阿里面试,5分钟就被一道题秒杀:HashMap与Hashtable
你们可能会想,我这么菜的吗?5分钟都坚持不了? 本文说起来会有点尴尬,毕竟这是我曾经经历过的故事 那时候的我还真菜,每天写着 if/ for 及一些简单的业务逻辑代码,虽工作有些日子了,但技术水平还停 ...
- 解决transition动画与display冲突的几种方法
如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translate”按钮后,蓝色区域透明度变为0,然后隐 ...
- C++版 - 剑指offer 面试题22:栈的压入、弹出序列 题解
剑指offer 面试题22:栈的压入.弹出序列 提交网址: http://www.nowcoder.com/practice/d77d11405cc7470d82554cb392585106?tpId ...