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("上传失败");
            });