jsupload實現js上傳文件，并顯示文件上傳進度

在傳統的文件上傳過程中，要想達到更好的客戶體驗一般是選擇Flash來實現的。但是隨著 Web 2.0 應用技術的不斷發展，JavaScript 正在扮演越來越重要的角色，現在已經可以用JavaScript來實現訪問本地文件，并且把上傳進度信息反饋給用戶。這一切都因為 File API 的出現而得到了徹底的改變。有關File API的介紹可以參考：http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/。

本文對上傳文件功能做了兼容，支持目前所有主流瀏覽器包括ie6+，firefox，chrome，safari，opera等等，對于支持 File API的瀏覽器會自動調用File API接口實現上傳文件信息預覽，上傳信息實時反饋給用戶。服務器端由Java實現，用了Apache的上傳組件commons-fileupload- 1.2.1.jar實現上傳功能和上傳進度監聽。

目前該功能只支持單文件上傳，頁面布局結構以及樣式來自http://www.matlus.com/html5-file-upload-with-progress/，由于有部分css3樣式所以在ie下不能達到預期的效果，該地址有更詳細的使用File API 來實現文件上傳信息預覽及上傳文件進度顯示，但是該地址的介紹只適用于支持File API的瀏覽器。

下面是幾種瀏覽器下上傳文件效果：

1.ie6

預覽效果：

上傳進度：

  

上傳完成：

2.ie8

預覽效果：

 

上傳進度：

上傳完成：

具體實現：

上傳文件信息預覽、上傳以及上傳進度顯示的實現封裝在JsUpload類里面，初始化時候需要創建JsUpload的一個實例，同時傳遞必須的參數。通過頁面File控件的change事件來處理上傳文件信息的預覽，在change事件的回調函數里面調用JsUpload的實例方法 change同時為這個方法傳遞一個回調函數作為上傳文件信息顯示的處理，該回調函數會接收JsUpload實例方法change傳遞回來的數據。上傳方法的實現是通過JsUpload的實例方法upload來實現的，上傳進度的實現主要是通過Ajax每隔一定的時間去服務器端請求獲取上傳文件大小來刷新頁面的進度數據。

最后附上源碼，有感興趣的可以一起討論，學習，源碼地址： jsupload.zip。

轉自：http://www.cnblogs.com/heikediguo/archive/2012/01/30/2332128.html