jQuery ajax formData檔案上傳進度條(親測,好文章!!)
阿新 • • 發佈:2020-12-23
技術標籤:jQueryjsvuejQueryajaxformData檔案上傳進度條
XMLHttpRequest.upload向後臺上傳檔案時監聽進度,主要使用的是
XMLHttpRequest
提供的upload
方法,此方法會返回一個XMLHttpRequestUpload
物件,用來表示上傳進度 。 ——XMLHttpRequest.uploadFormData是
XMLHttpRequest
提供的一個新的介面,主要優點是可以非同步上傳二進位制檔案。 ——FormData
具體操作如下
頁面結構及樣式
<input type="file" id="upload-file"> <div class="progress"> <div></div> </div> <button onclick="">上傳</button>
<style> .progress { width: 600px; height: 10px; border: 1px solid #ccc; border-radius: 10px; margin: 10px 0px; overflow: hidden; } /* 初始狀態設定進度條寬度為0px */ .progress > div { width: 0px; height: 100%; background-color: yellowgreen; transition: all .3s ease; } </style>
功能實現
function uploadFile() { //獲取上傳的檔案 var uploadFile = $('#upload-file')[0].files[0]; var formdata = new FormData(); formdata.append('fileInfo', uploadFile); // formdata.append("csrfmiddlewaretoken", '{{ csrf_token }}'); $.ajax({ url: '/uploadfileurl', type: 'post', // dataType: 'json', data: formdata, processData: false, contentType: false, xhr: function() { var xhr = new XMLHttpRequest(); //使用XMLHttpRequest.upload監聽上傳過程,註冊progress事件,列印回撥函式中的event事件 xhr.upload.addEventListener('progress', function (e) { console.log(e); //loaded代表上傳了多少 //total代表總數為多少 var progressRate = (e.loaded / e.total) * 100 + '%'; //通過設定進度條的寬度達到效果 $('.progress > div').css('width', progressRate); }) return xhr; } }) }
最終效果
備註:
僅僅是瀏覽器上傳速度,而不是上傳檔案後端後臺處理檔案的進度!!
如果需要後臺進度,則需要再額外輪詢傳送一個ajax,輪詢查詢伺服器後臺處理時對應的全域性進度數值。但是注意多執行緒情況對全域性變數的優化。
轉載自,有改動,親測其有效:https://www.cnblogs.com/wuyu1787/p/8919588.html