最近使用了bootstrap-fileinput插件，插件本身写的还不错，就是文档有点看不懂，语言逻辑毕竟不是中国人写的，自己用了一段时间，整理一下
附官网文档地址：http://www.bootstrap-fileinput.com/options.html
需要引入的bootstrap样式以及js请自行查找，本处不在复述。
<div class="form-group"> <label class="col-sm-2 control-label">图片:</label> <div class="col-sm-4"> <input type="file" id="imageFiles" name="imageFiles" accept="image/*" multiple> </div>
</div>
multiple 这是属性代表的是多文件上传，如果去掉，那么只能上传一个文件
/*js代码初始化*/
$("#imageFiles").fileinput({ /*以下三个属性是设置初始化动态加载，*/ initialPreviewAsData: true,//允许动态获取数据预览 initialPreview:[
\'localhost/image1\',
\'localhost/image2\',
],//动态加载图片地址url,可以填写多个使用\',\'隔开，我是通过c标签forEach循环的地址 initialPreviewConfig: [ {
type:\'audio\',//这个设置的是预加载的类型 可以是audio video text其他的类型，我没找到
filetype:\'audio/mp3\'，//设置更加具体的预览类型
caption:\'123\',个初始化预览文件的标题或者文件名 url: \'/musicTheory/ajaxDeleteImage\',//ajax删除这个文件第url extra: {id: \'8456456\'}//给url传入的参数以及名称 },//对应\'localhost/image1\'
{
url: \'/musicTheory/ajaxDeleteImage\',
extra: {id: \'${musicTheoryImage.id}\'}
},//对应\'localhost/image2\'
],//该标签是动态加载的配置项，是以数组的形式,每个数组分别对应initialPreview中的图片（按照顺序） uploadUrl:"/upload/musicTheoryUploadImage", //异步上传接受请求地址 uploadAsync : true, //默认异步上传 showCancel:false,//是否显示文件名 initialPreviewShowDelete:true,//显示图片上面的删除按钮 overwriteInitial:false,//动态加载图片之后，在重新上传新的图片的时候是否清除动态加载的图片默认是true 清除，false不清除 showUpload : false, //是否显示上传按钮,跟随文本框的那个 showRemove : false, //显示移除按钮,跟随文本框的那个 showCaption : true,//是否显示标题,就是那个文本框 showPreview : true, //是否显示预览,不写默认为true dropZoneEnabled : true,//是否显示拖拽区域，默认不写为true，但是会占用很大区域 showUploadedThumbs:false,//上传完毕之后，清理预览框中的图片，默认false清理*/ maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 minFilesNum:1,//最小上传图片个数 maxFilesNum:10,//最大上传图片个数 //minFileCount: 0, maxFileCount : 10, //表示允许同时上传的最大文件个数 //autoReplace : false,//是否自动替换当前图片，设置为true时，再次选择文件，会将当前的文件替换掉。 enctype : \'multipart/form-data\', validateInitialCount : true,//验证minFileCount和maxFileCount时是否包含初始预览文件计数（服务器上载的文件）。默认为false browseOnZoneClick:true, previewFileIconSettings: { \'docx\': \'<i class="fa fa-file-word-o text-primary" ></i>\', \'xlsx\': \'<i class="fa fa-file-excel-o text-success"></i>\', \'pptx\': \'<i class="fa fa-file-powerpoint-o text-danger"></i>\', \'jpg\': \'<i class="fa fa-file-photo-o text-warning"></i>\', \'pdf\': \'<i class="fa fa-file-pdf-o text-danger"></i>\', \'zip\': \'<i class="fa fa-file-archive-o text-muted"></i>\', \'doc\': \'<i class="fa fa-file-word-o text-primary"></i>\', \'xls\': \'<i class="fa fa-file-excel-o text-success"></i>\', \'ppt\': \'<i class="fa fa-file-powerpoint-o text-danger"></i>\', \'pdf\': \'<i class="fa fa-file-pdf-o text-danger"></i>\', \'zip\': \'<i class="fa fa-file-archive-o text-muted"></i>\', \'htm\': \'<i class="fa fa-file-code-o text-info"></i>\', \'txt\': \'<i class="fa fa-file-text-o text-info"></i>\', \'mov\': \'<i class="fa fa-file-movie-o text-warning"></i>\', \'mp3\': \'<i class="fa fa-file-audio-o text-warning"></i>\', \'jpg\': \'<i class="fa fa-file-photo-o text-danger"></i>\', \'gif\': \'<i class="fa fa-file-photo-o text-muted"></i>\', \'png\': \'<i class="fa fa-file-photo-o text-primary"></i>\' }, previewFileIcon : "<i class=\'glyphicon glyphicon-king\'></i>", /* layoutTemplates:{ actionUpload:\'\',//去除缩略图中的上传图片 actionZoom:\'\', //去除缩略图中的查看详情预览的缩略图标 actionDownload:\'\', //去览缩略图中的下载图标 actionDelete:\'\', //去除缩略图中的删除图标 },*/ msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！", allowedFileTypes : [ \'image\' ],//配置允许文件上传的类型 audio video text object allowedPreviewTypes : [ \'image\' ],//配置所有的被预览文件类型 allowedPreviewMimeTypes : ["jpg", "jpeg", "gif", "png"],//控制被预览的所有mime类型 language : \'zh\' }); $("#imageFiles").on(\'fileuploaded\', function(event, data, previewId, index) {//异步上传成功结果处理 var img= data;//接收后台传过来的json数据 var data=img.response; if(data.code=="0000"){ $("#hiddenImageFiles").append("<input type=\'hidden\' name=\'musicTheoryImageList["+i+"].url\' value=\'"+data.data+"\'>"); i++; } }); $(\'#imageFiles\').on(\'filesuccessremove\', function(event, id) {//这个是ajax上传成功之后，点击缩略图中的删除按钮触发的事件 console.log(\'Uploaded thumbnail successfully removed\'); console.log(\'Event\'+event); console.log(\'Id\'+id); }); $(\'#imageFiles\').on(\'filepreremove\', function(event,id,index) { console.log("id:"+id+"index:"+index+"event:"+event); });//ajax异步上传成功之前删除可以触发的事件，上传成功之后再按删除按钮，不管用的啊 $(\'#imageFiles\').on(\'fileclear\', function(event) {//input框中清除按钮触发的事件 $("[name=\'musicTheoryImageList"]).remove(); }); $("#imageFiles").on(\'fileerror\', function(event, data, msg) {//异步上传失败结果处理 alert("上传失败"); });