jquery fileupload plugin

demo :https://blueimp.github.io/jQuery-File-Upload/

github:https://github.com/blueimp/jQuery-File-Upload

api:https://github.com/blueimp/jQuery-File-Upload/wiki/API

 

最近總是遇到上傳問題，一直使用的都是jquery-fileupload這款插件， 有詳細的Api文檔，具體用法就不做詳細描述了。

只說填過的坑。

（1）自動 上傳 與非自動，用戶觸發，
        

$('#fileupload').fileupload({
    add: function (e, data) {
     //綁定觸發按鈕事件
      $.("#okBtn").on("click",function(){
         data.submit();     
      })
    }
});

 

（2）IE8,9圖片預覽問題

         以前的博客里寫過對這個的封裝方法，大家可以翻一下瞅瞅；

（3）IE8 input框用戶點擊事件
            “input=file”,獲取文件時，在IE8下無法通過某個按鈕click事件間接觸發input=file的change事件，

            如果設計里這么要求了，可以用樣式解決，將input透明 置於上層，放原按鈕位置之上

（4）選擇之后，事件取消 abort

var jqXHR = $('#fileupload').fileupload('send', {files: filesList})
    .error(function (jqXHR, textStatus, errorThrown) {
        if (errorThrown === 'abort') {
            alert('File Upload has been canceled');
        }
    });
$('button.cancel').click(function (e) {
    jqXHR.abort();
});

（5）多文件一次一條請求上傳

<form >
    <input name="file1[]" type="file" multiple />
    <br />
    
    <input name="file2[]" type="file" multiple />
    <br />
    
    <input name="file3[]" type="file" multiple />
    <br />
 
    <button>send by fileupload send api</button>
</form>

$(document).ready(function(){
    var filesList = [],
        paramNames = [],
        elem = $("form");
    file_upload = elem.fileupload({
        formData:{extra:1},
        autoUpload: false,
        fileInput: $("input:file"),
    }).on("fileuploadadd", function(e, data){
        filesList.push(data.files[0]);
        paramNames.push(e.delegatedEvent.target.name);
    });

    $("button").click(function(e){
        e.preventDefault();
        file_upload.fileupload('send', {files:filesList, paramName: paramNames});
    })
})