经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过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文件上传控件的亲身实践的更多相关文章

  1. bootstrap-fileinput文件上传控件的亲身实践

    经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错.赶紧就撸起来了. 1.下载压缩包.插件地址https://githu ...

  2. ***文件上传控件bootstrap-fileinput的使用和参数配置说明

    特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在filein ...

  3. jquery文件上传控件 Uploadify

    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...

  4. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑

    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...

  5. jquery文件上传控件 Uploadify 问题记录

    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...

  6. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)

    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...

  7. 因用了NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误的解决方法

    今天遇到一个问题,就是“NeatUpload大文件上传控件而导致Nonfile portion > 4194304 bytes错误”,百度后发现了一个解决方法,跟大家分享下: NeatUploa ...

  8. 对FileUpload文件上传控件的一些使用方法说明

    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...

  9. 符合BME风格的弹窗\菜单\表格\文件上传控件

    1.弹窗 2.菜单 3.表格 4.文件上传控件 笔记补充......

随机推荐

  1. 【sql注入】浅谈JSP安全开发之SQL注入

    [sql注入]浅谈JSP安全开发之SQL注入 本文转自:i春秋社区 前言不管是用什么语言编写WEB应用程序,他们都或多或少有一些地方存在漏洞.如果你想知道漏洞的运行原理,和防御方案,那么请看完本篇文章 ...

  2. eclipse使用和快捷键

    一.快捷键 - ctrl + shift + o 导包 - ctrl + shift + t 快速查找某个类 - 先按ctrl + 2 ,再点L, 创建变量并命名 - ctrl + o , 在当前类中 ...

  3. 第51节:Java当中的集合框架Map

    简书作者:达叔小生 Java当中的集合框架Map 01 Map提供了三个集合视图: 键集 值集 键-值 映射集 public String getWeek(int num){ if(num<0 ...

  4. C#zip压缩类

    改造了网上的代码,可以压缩文件夹.指定文件列表(文件和文件夹的混合列表,需要指定子文件夹下需要压缩的文件),注释很详细不做解释 public class ZipHelper { /// <sum ...

  5. 埃航和737MAX坠毁:软件优先级问题

    事件背景: 2019年3月10日,埃塞俄比亚航空公司一架波音737MAX8飞机发生坠机,机上157人全部遇难,包括8名中国公民.这是继去年10月29日印尼狮航空难事故之后,波音737MAX8飞机在五个 ...

  6. 过了所有技术面,却倒在 HR 一个问题上。。

    面试问离职原因,这是我们广大程序员朋友面试时逃不开的问题,如果答得不好,可能就影响了你整个的面试结果. 最近在栈长的Java技术栈vip群里,我也看到大家在讨论这个问题,其中有个朋友的回复栈长很有感触 ...

  7. 11 使用Tensorboard显示图片

    首先,下载一张png格式的图片(注意:只支持png格式),命名为1.png.然后,打开PythonShell,输入以下代码: import tensorflow as tf # 获取图片数据 file ...

  8. 【转载】uCOS系统的思考

    一:  世界潮流,浩浩汤汤,顺之者昌,逆之者亡---孙中山 从80X86到ARM9,再从ARM9到ARM7,平台是越做越简单,但是简单并不是意味着退步,反而是种潮流趋势... 在CISC道路上渐行渐远 ...

  9. solr查询特殊字符的处理

    1. 使用solr的页面功能时,遇到语法错误 2. 确认原因 从lexical error分析时特殊字符的问题. 首先 solr查询有哪些特殊字符? 查找官方文档:http://lucene.apac ...

  10. php使用cURL上传图片

    上传文件和POST非常相似,都是通过表单采取POST方法提交的. 先新建一个接收文件的页面upload.php: var_dump($_POST); var_dump($_FILES); 再建立一个发 ...