使用 XmlHttpRequest 實現帶進度條的異步文件下載是一個常見的需求。在本文中，我們將介紹如何利用 XmlHttpRequest 對象以及一些 JavaScript 技術來實現這一功能。我們將使用 HTML5 的進度條元素來展示下載進度。
在開始之前，我們先了解一下 XmlHttpRequest 對象。它是一種在后臺與服務器進行交互的技術，可以用來發送 HTTP 請求，并異步獲取服務器的響應。在本例中，我們將使用 XmlHttpRequest 對象發送一個 GET 請求來下載文件，并通過監聽其進度事件來更新進度條。
首先，在 HTML 中，我們需要創建一個進度條元素，用來顯示下載進度。
```html
<a onclick="downloadFile(this)" data-url="文件鏈接" data-name="自定義文件名" class="download">
<img src="__IMG__/download.png" />
</a>
<div class="progressBar_f">
<div id="progressBar"></div>
</div>
```
接下來，我們創建一個 JavaScript 函數，用來處理文件的下載以及更新進度條。代碼如下：
```javascript
<script type="text/javascript">
function downloadFile(obj) {
var file_url = $(obj).attr('data-url');
var file_name = $(obj).attr('data-name');
$(obj).next('.progressBar_f').show();
var xhr = new XMLHttpRequest();
// xhr.onprogress = onProgress; //下載監聽
//監聽進度事件
xhr.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
// var percentComplete = evt.loaded / evt.total;
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
console.log(percentComplete);
$(obj).next('.progressBar_f').children("#progressBar").css("width", percentComplete + '%');
if(percentComplete=='100'){
$(obj).next('.progressBar_f').hide();
}
}
}, false);
xhr.responseType = "blob";
xhr.open("GET", file_url, true);
xhr.onreadystatechange = function (e) {
if (this.readyState == 4 && this.status == 200) {
var response = this.response;
var URL = window.URL || window.webkitURL || window;
var link = document.createElement('a');
link.href = URL.createObjectURL(response);
link.download = file_name;
//link.click(); //ie及firefox不響應識別模擬點擊事件
//下面方法,edge,chrome和firefox都兼容
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
link.dispatchEvent(event);
}
}
xhr.send(null);
return false;
}
</script>
```
在上述代碼中，downloadFile函數接收一個參數obj，表示要下載的跨域資源的內容，其中file_url為跨域資源的URL，file_name為自定義的下載資源名稱。首先創建一個XMLHttpRequest對象，設置其請求方式為GET，并將響應類型設置為blob。接下來，監聽xhr對象的readyState 事件，在獲取到響應后判斷狀態碼是否為4，如果是，則創建一個a標簽，設置其href屬性為通過URL.createObjectURL()方法創建的臨時鏈接，并設置download屬性為要下載的文件名。最后，模擬用戶點擊該a標簽，實現跨域資源的間接下載。需要注意的是，這個方法需要遠程服務器端設置CORS（跨域資源共享）允許跨域訪問，如果沒有設置遠程資料跨域共享是無法下載文件的。
如沒特殊注明，文章均為方維網絡原創,轉載請注明來自http://www.sdlwjx666.com/news/6887.html
