Bootstrap fileinput插件使用的那些坑

最近找到了一个好用的文件上传插件，最主要的是兼容Bootstrap样式，这样对后天的开发人员来说就比较舒服了，但是在使用的时候遇到了一些问题，我把它记下来

一、文件加载顺序问题

fileinput.js需要加载这个js。
在这个js加载之前先加载bootstrap.js，还有这个插件有中文zh.js需要在fileinput.js之后引入，还有css文件引入顺序也跟这个差不多。不然之后页面刷新可能会出现样式错乱问题

1. bootstrap的各种样式和js

2. bootstrap-fileinput.js引入跟zh.js引入

   ---

   
   再给一个简单的实现吧

   html

<input id="inputFile" name="uploadFile" type="file" class="file" >

js

var inputFile;
$(function(){
    inputFile = $("#inputFile").fileinput({//初始化上传文件框
        language: 'zh',
        uploadUrl: Consts.PATH+"/fileUpload/upload", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        uploadAsync: false, //默认异步上传
        showUpload:true, //是否显示上传按钮
        showRemove :true, //显示移除按钮
        showPreview :true, //是否显示预览
        showCaption:true,//是否显示标题
        dropZoneEnabled: false,//是否显示拖拽区域
        browseClass:"btn btn-primary", //按钮样式
        enctype:'multipart/form-data',
        validateInitialCount:true,
    });
    $('#inputFile').on('filebatchuploadsuccess', function(event, data, previewId, index) {    
        console.log(event);
        console.log(data);
        console.log(previewId);
        console.log(index);

    });
});

还有其他方法，有需求可以自己试试官方demo

---

二、返回值问题

1. 返回值最好是JSON，其他返回值好像不行，具体的我没有试过
2. 当你保存图片成功时返回值的JSON中不要包含‘error’即{"error": "***",****}
   如果包含这个，js解析会把这个当成是错误信息，即上传失败，其实你是成功的。这个我找了一天，终于找到问题了，要记住这个教训

---

再有坑会继续修改。。。