fileinput异步多文件上传删除
最近使用了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("上传失败"); });
