XMLHttpRequest upload.addEventListener“進度”不起作用

Question

我試圖在上傳文件時顯示進度條。 但是當我使用 XMLHttpRequest 上傳進度事件監聽器時，它不起作用並在控制台中返回這些錯誤=>“從源'http://127.0.0.1:5501'訪問'服務器地址'的XMLHttpRequest已被CORS策略阻止：對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”header。 和“POST http://serveraddress:/.net::ERR_FAILED”。 我嘗試了一些方法，但我不知道為什么會這樣。 如果你告訴我我能做什么，我會感謝你......這是我的 javascript 代碼：

 var oOutput = document.getElementsByClassName("file-result")[0], oData = new FormData(form); oData.append("action", "6"); oData.append("adminID", checkCookie().toString()); var oReq = new XMLHttpRequest(); oReq.open("POST", "serveraddress", true); oReq.upload.addEventListener("progress", function(event) { let percent = (event.loaded / event.total * 100); document.getElementsByClassName("insider-bar")[0].style.width = percent + '%'; document.getElementById('progress-percent').innerHTML = percent + '%'; console.log(event.total); }); oReq.onload = function(oEvent) { if (oReq.status == 200) { document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none"; if (fileCounter == 0) { coverLink = oReq.responseText; } else { if (oReq.responseText.indexOf(".mp4") == -1) imageFilesLink.push(oReq.responseText); else videoFilesLink.push(oReq.responseText); let fileDiv = document.createElement("div"); fileDiv.className += "files ".concat(oReq.responseText); fileDiv.innerHTML = '<i class=\"fa fa-link\"></i>'; fileDiv.setAttribute("onclick", 'setClipboard("server-address' + oReq.responseText + '")'); fileDiv.setAttribute("ondblclick", 'showPictures("serveraddress' + oReq.responseText + '")'); document.getElementById("file-result").appendChild(fileDiv); } fileCounter++; } else { document.getElementsByClassName('progressbar-wrapper')[0].style.display = "none"; } }; oReq.send(oData); ev.preventDefault();

 <div class="progressbar-wrapper"> <div class="upload-progress"> <div class="insider-bar"></div> </div> <p id="progress-percent">0%</p> </div>

Answer 1

你可以在這個地址找到另一種方式：

https://attacomsian.com/blog/xhr-monitor-progress

xhr.onprogress = (event) => { console.log( Downloaded ${event.loaded} of ${event.total} bytes ); }