這篇文章主要介紹了MVC中基於Ajax和HTML5實現文件上傳功能的相關資料,需要的朋友可以參考下
引言
在實際程式設計中,經常遇到實作檔案上傳並顯示上傳進度的功能,基於此目的,本文就為大家介紹不使用flash 或任何上傳檔案的插件來實現具有進度顯示的檔案上傳功能。
基本功能:實現具有進度條的檔案上傳功能
#進階功能:透過拖曳檔案的操作實現多個檔案上傳功能
##背景
HTML5提供了一種標準的存取本機檔案的方法—File API規格說明,透過呼叫File API 能夠存取檔案信息,也可以利用客戶端來驗證上傳檔案的類型和大小是否規範。 此規格說明包含以下幾個介面來使用檔案:File介面:具有檔案的“讀取權限”,可以取得檔案名,類型,大小等。 FileList介面:指單獨選定的文件列表,可以透過或拖曳呈現在使用者介面供使用者選擇。 XMLHTTPRequest2是HTML5的無名英雄,XHR2與XMLHttpRequest大體相同,但同時也增加了許多新功能,如下:##1. 增加了上傳/下載二進位資料
2. 增加了上傳過程中Progess (進度條)事件,該事件包含多部分的資訊:
Total:整數值,用於指定傳輸資料的總位元組數。
Loaded:整數值,用於指定上傳的位元組。lengthComputable:Bool值用來偵測上傳檔案大小是否可計算。
3. 跨資源共享請求
這些新功能都使得Ajax和HTML5很好的協作,讓檔案上傳變得非常簡單,不再需要使用Flash Player、外部外掛程式或html的