jQuery File Upload文件上傳插件使用

　　jQuery File Upload 是一個Jquery文件上傳組件，支持多文件上傳、取消、刪除，上傳前縮略圖預覽、列表顯示圖片大小，支持上傳進度條顯示；支持各類動態語言開發的服務器端。官網連接：https://github.com/blueimp/jQuery-File-Upload/wiki

　　特色：拖放支持；上傳進度條；圖像預覽；可定製和可擴展的；兼容任何服務器端應用平臺（PHP, Python, Ruby on Rails, Java, Node.js, Go etc.）。

使用方法：

1. 須要加載的js文件：

jquey-1.8.3.min.js

jquery-ui-widget.js

jquery.iframe-transport.js

jquery.fileupload.js

2. html代碼：

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

3. js代碼：

$(function () {

    $('#fileupload').fileupload({

        dataType: 'json',

        done: function (e, data) {

            $.each(data.result.files, function (index, file) {

                $('<p/>').text(file.name).appendTo(document.body);

            });

        }

    });

});

 

　　3.1 顯示上傳進度條：

　　$('#fileupload').fileupload({

    　　progressall: function (e, data) {

        　　var progress = parseInt(data.loaded / data.total * 100, 10);

        　　$('#progress .bar').css(

            　　'width',

            　　progress + '%'

        　　);

    　　}

　　});

　　3.2 須要一個<div>容器用來顯示進：

　　<div id="progress">

    　　<div class="bar" style="width: 0%;"></div>

　　</div>

 

4. API

4.1 Initialization：

在上傳按鈕上調用fileupload()方法;

示例：$('#fileupload').fileupload();

 

4.2 Options :

1: url：請求發送的目標url

Type: string

Example: '/path/to/upload/handler.json'

2.Type: 文件上傳HTTP請求方式，能夠選擇「POST」，「PUT」或者"PATCH",

默認"POST"

Type: string

Example: 'PUT'

3. dataType:但願從服務器返回的數據類型，默認"json"

Type: string

Example: 'json'

4. autoUpload:默認狀況下，只要用戶點擊了開始按鈕被添加至組件的文件會當即上傳。將autoUpload值設爲true能夠自動上傳。

Type: boolean

Default: true

5. acceptFileTypes：容許上傳的的文件類型

Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上傳文件大小

Example: 999000 (999KB)      //單位：B

7. minFileSize:最小上傳文件大小

Example: 100000  (100KB)     //單位：B

8.previewMaxWidth : 圖片預覽區域最大寬度

Example: 100      //單位：px

 

4.3 Callback Options:

使用方法一：函數屬性

      實例：$('#fileupload').fileupload({

    　　drop: function (e, data) {

        　　$.each(data.files, function (index, file) {

            　　alert('Dropped file: ' + file.name);

        　　});

    　　},

    　　change: function (e, data) {

        　　$.each(data.files, function (index, file) {

            　　alert('Selected file: ' + file.name);

        　　});

    　　}

　　});

使用方法二：綁定事件監聽函數

　　實例：

      $('#fileupload')

　　　　.bind('fileuploaddrop', function (e, data) {/* ... */})

　　　　.bind('fileuploadchange', function (e, data) {/* ... */});

每一個事件名稱都添加前綴：」fileupload」;

注意推薦使用第二種方法。

 

經常使用的回調函數：

1. add: 當文件被添加到上傳組件時被觸發

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});

2. processalways: 當一個單獨的文件處理隊列結束（完成或失敗時）觸發

3. progressall: 全局上傳處理事件的回調函數

Example:

$('#fileupload').on('fileuploadprogressall', function (e, data) {      //進度條顯示

    var progress = parseInt(data.loaded / data.total * 100, 10);

    $('#progress .progress-bar').css(

            'width',

            progress + '%'

    );

});

4. fail : 上傳請求失敗時觸發的回調函數，若是服務器返回一個帶有error屬性的json響應這個函數將不會被觸發。

5. done : 上傳請求成功時觸發的回調函數，若是服務器返回一個帶有error屬性的json響應這個函數也會被觸發。

6. always : 上傳請求結束時（成功，錯誤或者停止）都會被觸發。