JAVASCRIPT網頁應用程式設計

處理檔案

|

117

e.stopPropagation();

e.preventDefault();

var files = e.originalEvent.dataTransfer.files;

for ( var i = 0; i < files.length; i++)

uploadFile(files[i]);

return false;

});

上傳檔案

接下來，就可以開始實作

uploadFile()

函式（現在開始才是關鍵所在）。我們會用

jquery.upload.js 裡的

$.upload()

函式，發送一組 Ajax 上傳請求給伺服器。同時讓這組

請求監聽 progress 事件，並隨時更新 jQuery UI 進度列。等到上傳完成之後，顯示一組

訊息告知使用者，再讓進度列消失：

var uploadFile = function(file){

var element = $("<div />");

element.text(file.fileName);

var bar = $("<div />");

element.append(bar);

$("#progress").append(element);

var onProgress = function(e){

var per = Math.round((e.position / e.total) * 100);

bar.progressbar({value: per});

};

var onSuccess = ...