jQuery File Upload檔案上傳外掛程式使用詳解_jquery

　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 : 上傳請求結束時（成功，錯誤或者中止）都會被觸發。

以上所述是小編給大家介紹的jQuery File Upload檔案上傳外掛程式使用詳解，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！