基於HTML5 Ajax實現檔案上傳並顯示進度條

效果圖：

htm上傳是同步上傳的方式，所以能夠實現進度條的顯示。

1.上傳檔案：

首先我們用ajax來取得zkefqput type="file" id="file_upload">的file物件：

var file = null;

var input = $("#file_upload"

//檔案域選擇檔案時, 執行readfile函式

input.addeventlistener('change',readfile,false);

function readfile()

然後用formdata()送到後台。

var fd = new formdata();

fd.append("file", file);

2.監聽事件：給xmlhttprequest新增上傳中的監聽事件，可以得到已上傳的檔案大小，用以實現進度條的顯示。

//監聽事件

hr.upload.addeventlistener("progress", uploadprogress, false);

完整**如下：

進度條測試

程式設計客棧type="file" id="file_upload"/>

0%

基於HTML5 Ajax實現檔案上傳並顯示進度條

效果圖 html5上傳是同步上傳的方式，所以能夠實現進度條的顯示。1.上傳檔案 首先我們用ajax來取得的file物件 var file null var input file upload 檔案域選擇檔案時,執行readfile函式 input.addeventlistener change re...

HTML5 ajax上傳附件

xhr.upload.addeventlistener progress progress 上傳中事件,不間斷觸發 false xhr.addeventlistener load load 上傳成功事件 false xhr.addeventlistener error error 異常處理事件 fa...

HTML5 AJAX跨域請求

html5新的標準中，增加了 cross origin resource sharing 特性，這個特性的出現使得跨域通訊只需通過配置http協議頭來即可解決。cross origin resource sharing 詳細解釋見 cross origin resource sharing實現的最重...