JAVASCRIPT網頁應用程式設計

116

|

第七章

事實上，該事件還有一個 timestamp 屬性，如果有儲存開始上傳檔案的時間，就可以大

致計算出預計完成時間（Estimated Time of Completion，ETA）：

var startStamp = new Date();

var progress = function(e){

var lapsed = startStamp - e.timeStamp;

var eta = lapsed * e.total / e.position - lapsed;

};

不過，如果上傳的檔案較小，這個估計值就會不太準（因為上傳速度太快）。我個人認

為，通常只有在上傳時間超過四分鐘以上的情況下，才需要顯示 ETA。大部分的情況，

只需要顯示完成百分比，就足以讓使用者清楚的看出還需要上傳多久。

用 jQuery 開發可拖曳 / 置放檔案的上傳器

接下來，就讓我們應用稍早所學，實際開發一個可拖曳 / 置放檔案的上傳器。這裡需要

用到的函式庫有：

jquery.js

（程式骨幹）、

jquery.ui.js

（上傳進度列的 UI）、

jquery.drop.js

（拖曳 / 置放的 API），以及

jquery.upload.js

（發送 Ajax 上傳請求）。所有的程式邏輯，

都會放在

jQuery.ready()

裡面，這樣就會等到 DOM 元件都準備好之後，才開始執行主

程式：

//= require <jquery>

//= require <jquery.ui>

//= require <jquery.drop> ...