標籤：setting nload src dstar 上傳 url jquery data erro
概述：ajax提交比較大的檔案的時候，我們希望能夠看到它上傳的進度，代碼放下面了。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>XMLHttpRequest 上傳檔案進度條樣本</title></head><body><progress id="upload_progress" value="0" max="100"></progress><input id="upload_file" type="file" name="upload_file" /><button id="btn_start">Start</button><button id="btn_cancel">Cancel</button><script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script><script type="text/javascript">var xhr = new XMLHttpRequest();var progressBar = document.getElementById(‘upload_progress‘);$(‘#btn_start‘).click(function() { var uploadFile = document.getElementById(‘upload_file‘).files[0]; var formData = new FormData(); formData.append(‘upload_file‘, uploadFile); // --------------------------------------- // 原生xmlHttpRequest發送 xhr.open(‘post‘, ‘/server_url.php‘); xhr.onload = function() { alert(‘完成！‘); }; xhr.onerror = function() { alert(‘無法串連伺服器！‘); }; xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log(‘started...‘); }; xhr.send(formData); // --------------------------------------- // 使用ajax發送 /** $.ajax({ type: "POST", url: "/server_url.php", data: formData , //這裡上傳的資料使用了formData 對象 processData: false, contentType: false, //必須false才會自動加上正確的Content-Type //這裡我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然後再返回交給ajax使用 xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log(‘started...‘); }; } return xhr; } }).done(function(resp) { alert(‘完成！‘); }).fail(function(err) { alert(‘無法串連伺服器！‘) });*/});$(‘#btn_cancel‘).click(function() { xhr.abort();});</script></body></html>
原理就是這樣，需要在此基礎上做擴充的可以隨意添加自己想要的功能。
Ajax提交進度顯示執行個體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
