使用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獲取單個文件的上傳進度

回答

相關問題