组件的下载地址为：https://github.com/kartik-v/bootstrap-fileinput
比较详细的介绍可参看：http://www.jq22.com/jquery-info5231
下面说一下在使用此组件时候遇到的一些问题，和解决办法
问题1：在选择图片时，无法选择多个图片，且第一张图片选择后，在选择第二张图片时，第一张图片会被第二章图片覆盖，即无法多选图片。
解决办法：需要在input中加入multiple="multiple"，且在初始化fileinput配置时，一定加入uploadUrl的设置
问题2：提交多张图片时只post了一张
解决办法：fileinput默认是异步上传的，即uploadAsync: true，你会发现如果你上传多张图片，请求就会发送多次，每次只提交一张图片，如果想一次提交所有图片，则需要将uploadAsync设置为false。
问题3：使用自带的上传按钮时，如何向后台传递额外的参数
解决办法：在fileinput配置中加入uploadExtraData配置，如下：
uploadExtraData:function (previewId, index) {
//向后台传递type,nameStr作为额外参数
var obj = {};
obj.type = "cardno";
obj.nameStr = "HL0093"
return obj;
}
问题4：如何取消预览缩略图上面的查看、上传、删除三个小图片
解决办法：在fileinput配置中加入layoutTemplates配置，如下：
layoutTemplates :{
actionDelete:'', //去除上传预览的缩略图中的删除图标
actionUpload:'',//去除上传预览缩略图中的上传图片；
actionZoom:'' //去除上传预览缩略图中的查看详情预览的缩略图标。
},
问题5：如何实现自动上传及上传成功或者失败的后的处理。
解决办法：如下：
}).on("filebatchselected", function(event, files) {
$(this).fileinput("upload");
}).on("filebatchuploadsuccess", function(event, data) {
$("#check2").val(true)
}).on('fileerror', function(event, data, msg) {
console.log('文件上传失败！'+msg);
});
此处附上比较完整的实现代码
<input class="form-control" type="file" id="cardFiles" multiple="multiple" name="file"/>
<script type="text/javascript">
$(document).ready(function() {
$("#cardFiles").fileinput({
language: 'zh', //设置语言
uploadUrl:'http://localhost/backoa/employee/upload',
enctype: 'multipart/form-data',
allowedFileExtensions : ['jpg', 'png','bmp','jpeg'],//接收的文件后缀
showUpload: false, //是否显示上传按钮
showPreview: true, //展前预览
showCaption: true,//是否显示标题
maxFileSize : 10000,//上传文件最大的尺寸
maxFileCount: 10,
dropZoneEnabled: false,//是否显示拖拽区域
browseClass: "btn btn-primary", //按钮样式
uploadAsync: false,
allowedPreviewTypes: ['image'],
layoutTemplates :{
actionUpload:'',//去除上传预览缩略图中的上传图片；
},
uploadExtraData:function (previewId, index) {
//向后台传递type,nameStr作为额外参数
var obj = {};
obj.type = "card";
obj.nameStr = "HL0093"
return obj;
}
}).on("filebatchselected", function(event, files) {
$(this).fileinput("upload");
}).on("filebatchuploadsuccess", function(event, data) {
$("#check1").val("done");
}).on('fileerror', function(event, data, msg) { //一个文件上传失败
console.log('文件上传失败！'+msg);
});
});
相关参考：https://blog.csdn.net/zlb_lover/article/details/76548772