在 Firefox 上上传 100% 时，Html5 ajax 文件上传进度侦听器不会触发

发布于 2025-01-04 02:55:22 字数 866 浏览 1 评论 0原文

我正在通过ajax上传文件并在上传后处理图像。当我尝试在 Firefox 上通过 ajax 上传图像文件时，当上传百分比为 100% 但文件上传成功时，xhr 进度事件不会触发我的进度函数。

Google Chrome 在上传进度 100% 时触发，但 Firefox 不会。

Biriefly我的上传脚本：

$("#uploadbutton").click(function(){
   var xhr=new XMLHttpRequest()
   ,fd=new FormData();

   xhr.upload.addEventListener("loadstart", uploadStart, false);
   xhr.upload.addEventListener("progress", uploadProgress, false);
   xhr.addEventListener("error", uploadFailed, false);

   xhr.open("POST", mainurl+"ajaxupload.php");

   $.each($("#upload_input").files,function(i,file){
     fd.append("files_"+i,file);
   });    

  xhr.send(fd);

});

function uploadProgress(event){
   var percentComplete = Math.round(event.loaded * 100 / event.total);
   console.log("pecent ",percentComplete);
}

当上传开始时，uploadProgress函数运行1次（主要是在上传百分比80％时），但在上传完成时不触发。

原文

I am uploading files over ajax and processing images after upload.
When I tried upload image files over ajax on firefox , xhr progress event not triggering my progress function when upload percent do 100% but file was uploading successfully .

Google chrome triggering when upload progress 100% but firefox doesn't.

Biriefly my upload script :

$("#uploadbutton").click(function(){
   var xhr=new XMLHttpRequest()
   ,fd=new FormData();

   xhr.upload.addEventListener("loadstart", uploadStart, false);
   xhr.upload.addEventListener("progress", uploadProgress, false);
   xhr.addEventListener("error", uploadFailed, false);

   xhr.open("POST", mainurl+"ajaxupload.php");

   $.each($("#upload_input").files,function(i,file){
     fd.append("files_"+i,file);
   });    

  xhr.send(fd);

});

function uploadProgress(event){
   var percentComplete = Math.round(event.loaded * 100 / event.total);
   console.log("pecent ",percentComplete);
}

When upload start , uploadProgress function runnig 1 times ( mostly when upload percent 80% ), but not triggering when upload fnish .

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离去的眼神 2025-01-11 02:55:22

除了当前的处理程序之外，还添加两个：load （如果成功完成则触发），loadend （总是最后触发）。

// zero or once
xhr.addEventListener("load", uploadSuccess, false);
function uploadSuccess(event) {
    console.log("Upload successful.");
}

// once
xhr.addEventListener("loadend", uploadComplete, false);
function uploadComplete(event) {
    console.log("All done.");
}

In addition to your current handlers, add two more: load (fires if successful completion), loadend (fires last, always).

// zero or once
xhr.addEventListener("load", uploadSuccess, false);
function uploadSuccess(event) {
    console.log("Upload successful.");
}

// once
xhr.addEventListener("loadend", uploadComplete, false);
function uploadComplete(event) {
    console.log("All done.");
}

回复收藏 0 原文

~没有更多了~