使用XMLHttpRequest获取单个文件的上传进度

我使用XMLHttpRequest（使用jQuery）获取多个文件的上传进度。通过向XMLHttpRequest对象添加“progress”事件侦听器，我可以获得event.loaded和event.total。这些变量给我所有文件加载和总字节组合。使用XMLHttpRequest获取单个文件的上传进度

我想要做的是获得每个单独文件的进度，但是从我所看到的信息不可用于XMLHttpRequest。真的吗？

我不认为这是必要的，甚至，但这里是我的代码：

var xhr = $.ajaxSettings.xhr(); 
if (xhr.upload) { 
    xhr.upload.addEventListener('progress', function(event) { 
     var percent = 0; 
     var position = event.loaded || event.position; 
     var total = event.total; 
     if (event.lengthComputable) { 
      percent = Math.ceil(position/total * 100); 
     } 
     updateProgressBar(percent); 
    }, false); 
} 
return xhr;

如果我可以使用XMLHttpRequest，这将是巨大的做到这一点。任何有关这方面的信息将不胜感激。

来源

2013-08-01 Gavin

看看这个：如何获得来自XMLHttpRequest的进展（http://stackoverflow.com/questions/76976/how-to-get-progress-from-xmlhttprequest） – Joe

谢谢，但我的脚本已经做到了。我的意思是我想要每个单独文件的进度，而不是所有的文件作为一个组。 – Gavin

然后每个请求只发送一个文件。 –

这是我所用，

$.ajax({ 
    xhr: function() { 
     myXhr = $.ajaxSettings.xhr(); 
     myXhr.addEventListener('progress', function (e) { }, false); 
     if (myXhr.upload) { 
      myXhr.upload.onprogress = function (e) { 
       var completed = 0; 
       if (e.lengthComputable) { 
        var done = e.position || e.loaded, 
         total = e.totalSize || e.total; 
        completed = Math.round((done/total * 1000)/10); 
       } 
       console.log(completed); // Displays the completed percentage 
      } 
     } 
     return myXhr; 
    } 
});

来源

2014-10-03 15:37:16

您可以使用JavaScript插件Dropzone.js。他由一个处理文件之一，显示进度条为每个文件，易于集成，支持移动，拖动和下降，...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/dropzone.css" /> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/style.css" /> 
 

 
<form action="/page_where_upload" class="dropzone"> 
 
    <div class="fallback"> 
 
    <input name="file" type="file" multiple /> 
 
    </div> 
 
</form>

如果您尝试运行该代码段，您将收到服务器错误，因为page_where_upload不存在！

来源

2017-02-17 16:46:41 Camille

使用XMLHttpRequest获取单个文件的上传进度

回答

相关问题