详细说明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，bootstrap.min.js，fileinput.min.js，中文插件zh.js 3，并使用

Div class=' upload-wrap '输入类型=' file ' id=' MD5 file ' multiple=' multiple ' name=' test '/div将其设置为multiple，可以选择多个文件进行上传。

Js文件操作

$ ('# md5file ')。fileinput ({language:' zh '，uploadurl 3360 ' http://localhost 33608080/sign '，showcaption 3360 true，//是否显示所选文件的简介showUpload: true，//是否显示Remove : True，//是否显示Close : True，//Close EncType : ' multipart/form-data '，Upload Async : False，//false同步上传。后台由数组接收，为真时异步上传。每次上传一个文件，都会多次调用layout templates 3360 { ActionUpload 3360 ' '//接口，也就是去掉上传按钮//ActionDelete 3360 ' '，//去掉删除按钮}。browse class : ' BTN BTN-primary '，maxFileCount: 2，minFileCount : 2，})。on(' filebatchuploadssuccess '，函数(RES){ console . log(RES)；});要求是选择两个文件上传，只能发起一个请求。因此，将maxFileCount和minFileCount设置为2，将uploadAsync设置为false，就是让两个文件同步上传，并在后台用数组接收一次。处理同步和异步上传成功结果的方法是不同的

异步上传错误结果处理

$('#uploadfile ')。on('fileerror '，函数(事件、数据、消息){ })；异步上传成功结果处理

$ ('# uploadfile ')。on ('fileuploaded '，函数(事件、数据、预览id、索引){})同步上载错误结果处理

$('#uploadfile ')。on('filebatchuploaderror '，函数(事件、数据、msg){ })；同步上传结果处理成功

$('#uploadfile ')。on(' filebatchuploadssuccess '，函数(事件、数据、previewId、索引){ })；其实并不难，只是没有处理同步上传成功结果的功能，无法捕捉中断点。我也很好奇我在很多地方看到的是以下的处理方法：

我一直在用$(“# uploadfile”))的方法。on ('filepreupload '，函数(e，data，preview id，index) {})，然后我恍然大悟，我把filepreupload改成了filebatchuploadsuccess，最终实现了同步上传的成功结果处理。就是一个小坑，被人误导了，自己也没看清楚。

还有一个参数：layoutTemplates，它对上传的文件进行操作

这些图标可以通过如上所示的红色圆圈来设置

layout templates : { ActionUpload : ' '//表示删除上传按钮//actionDelete: ' '，//删除删除按钮}，这是本文的全部内容。希望对大家的学习有帮助，支持我们。