使用XMLHttpRequest上传大文件时的进度条

我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。
我已经在文档和其他各种链接的帮助下完成了这项工作。
由于上传大文件是一项很长的工作，我想为用户提供一个进度条。
经过一些更多的阅读后，我遇到了一个例子 ，从理论上讲，它完全符合我的需要。
通过获取示例代码并使其适应我的需求，我达到了

var upload = { blobs: [], pageName: '', bytesPerChunk: 20 * 1024 * 1024, currentChunk: 0, loaded: 0, total: 0, file: null, fileName: "", uploadChunk: function (blob, fileName, fileType) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.responseText) { // alert(xhr.responseText); } } }; xhr.addEventListener("load", function (evt) { $("#dvProgressPrcent").html("100%"); $get('dvProgress').style.width = '100%'; }, false); xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100); $("#dvProgressPrcent").html(progress + "%"); $get('dvProgress').style.width = progress + '%'; } }, false); xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100); $("#dvProgressPrcent").html(progress + "%"); $get('dvProgress').style.width = progress + '%'; } }, false); xhr.open('POST', upload.pageName, false); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", fileName); xhr.setRequestHeader("X-File-Type", fileType); xhr.send(blob); }, upload: function (file) { var start = 0; var end = 0; var size = file.size; var date = new Date(); upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name; upload.loaded = 0; upload.total = file.size; while (start  size) { end = size; } var blob = file.slice(start, end); upload.uploadChunk(blob, upload.fileName, file.type); start = end; upload.loaded += start; } return upload.fileName; } }; 

这个电话就好（没有validation）

 upload.upload(document.getElementById("#upload").files[0]); 

我的问题是进度事件不会触发。
我已经尝试了xhr.addEventListener和xhr.upload.addEventListener（每次一次，每次都是），但是它从不会触发。 onreadystatechange和load事件触发就好了。

我非常感谢帮助我做错了什么

更新
经过多次尝试，我设法模拟进度，但我遇到了另一个问题：Chrome的UI在上传过程中没有更新。
代码现在看起来像这样

 var upload = { pageName: '', bytesPerChunk: 20 * 1024 * 1024, loaded: 0, total: 0, file: null, fileName: "", uploadFile: function () { var size = upload.file.size; if (upload.loaded > size) return; var end = upload.loaded + upload.bytesPerChunk; if (end > size) { end = size; } var blob = upload.file.slice(upload.loaded, end); var xhr = new XMLHttpRequest(); xhr.open('POST', upload.pageName, false); xhr.setRequestHeader("Content-Type", "multipart/form-data"); xhr.setRequestHeader("X-File-Name", upload.fileName); xhr.setRequestHeader("X-File-Type", upload.file.type); xhr.send(blob); upload.loaded += upload.bytesPerChunk; setTimeout(upload.updateProgress, 100); setTimeout(upload.uploadFile, 100); }, upload: function (file) { upload.file = file; var date = new Date(); upload.fileName = date.format("dd.MM.yyyy_HH.mm.ss") + "_" + file.name; upload.loaded = 0; upload.total = file.size; setTimeout(upload.uploadFile, 100); return upload.fileName; }, updateProgress: function () { var progress = Math.ceil(((upload.loaded) / upload.total) * 100); if (progress > 100) progress = 100; $("#dvProgressPrcent").html(progress + "%"); $get('dvProgress').style.width = progress + '%'; } }; 

更新2
我已经设法修复它并模拟了一个在chrome中工作的进度条。
我用之前的代码示例更新了有效的代码示例。
您可以通过减少上传的块的大小来更频繁地“更新”条形图Tahnk为您提供帮助

Answer 1

如https://stackoverflow.com/a/3694435/460368中所述 ，您可以：

 if(xhr.upload) xhr.upload.onprogress=upload.updateProgress; 

和

 updateProgress: function updateProgress(evt) { if (evt.lengthComputable) { var progress = Math.ceil(((upload.loaded + evt.loaded) / upload.total) * 100); $("#dvProgressPrcent").html(progress + "%"); $get('dvProgress').style.width = progress + '%'; } } 

Answer 2

有我的解决方案：

 function addImages(id) { var files= $("#files").prop("files"); var file = files[loopGallery]; var cList= files.length; var fd = new FormData(); fd.append("file", file); fd.append("galerie", id); var xhr = new XMLHttpRequest(); xhr.open("POST", "moduls/galerie/uploadimages.php", true); xhr.upload.onprogress = function(e) { var percentComplete = Math.ceil((e.loaded / e.total) * 100); $("#progress").css("display",""); $("#progressText").text((loopGallery+1)+" z "+cList); $("#progressBar").css("width",percentComplete+"%"); }; xhr.onload = function() { if(this.status == 200) { $("#progressObsah").load("moduls/galerie/showimages.php?ids="+id); if((loopGallery+1) == cList) { loopGallery = 0; } else { $("#progressBar").css("width", "0%"); loopGallery++; addImages(id); } }; }; if(cList < 1) { } else { xhr.send(fd); } }