Estoy tratando de mostrar una barra de progreso cuando estoy cargando un archivo. pero cuando uso XMLHttpRequest upload eventListener de progreso, no funciona y devuelve estos errores en la consola => "El acceso a XMLHttpRequest en 'dirección del servidor' desde el origen 'http://127.0.0.1:5501' ha sido bloqueado por la política CORS : La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: no hay un encabezado 'Access-Control-Allow-Origin' en el recurso solicitado". Y "POST http://serveraddress:/ net::ERR_FAILED". Lo he intentado de varias maneras, pero no tengo ni idea de por qué sucede esto. Te agradeceré si me dices qué puedo hacer... Aquí está mi código 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>Puedes encontrar otra forma en esta dirección:
https://attacomsian.com/blog/xhr-monitor-progreso
xhr.onprogress = (evento) => { console.log( Downloaded ${event.loaded} of ${event.total} bytes ); }