在AJAX文件上傳中加載和總計的無意義值

Question

我想通過組合tutorial on multiple files drag and drop uploading和tutorial on progress bar uploading中的代碼來構建多個文件拖放上傳的進度條。

的Javascript部分是：

var dropzone = document.getElementById("dropzone"); 

function updateProgress(e){ 
    document.getElementById("progress").innerHTML = e.loaded + " of " + e.total; 
} 

function upload(files){ 
    var formData = new FormData(), 
     xhr = new XMLHttpRequest(), 
     x; 
    for(x = 0; x < files.length; x++){ 
    formData.append("file[]", files[x]); 
    } 
    xhr.addEventListener("progress", updateProgress, false); 
    xhr.open("post", "upload.php"); 
    xhr.send(formData); 
}  

dropzone.ondrop = function(e){ 
    e.preventDefault(); 
    this.className = "dropzone"; 
    upload(e.dataTransfer.files); 
} 

dropzone.ondragover = function(){ 
    this.className = "dropzone dragover"; 
    return false; 
} 

dropzone.ondragleave = function(){ 
    this.className = "dropzone"; 
    return false; 
} 

而且upload.php很簡單：

<?php 
if(!empty($_FILES["file"]["name"][0])) 
    foreach($_FILES["file"]["name"] as $position => $name) 
    move_uploaded_file($_FILES["file"]["tmp_name"][$position], "uploads/".$name); 
?> 

對於啓動，使得實際的進度條之前，我只是想表明上傳和總字節數。但是，如果upload.php不回聲，則函數updateProgress不會被調用，否則（例如，如果我添加echo "something";）e.loaded和e.total是小數值的相同值，與文件大小無關。

即使是大文件（幾百MB），文件上傳本身也能正常工作。對於大文件，我注意到函數updateProgress僅在上傳完成後才調用一次。

爲什麼此事件處理的行爲如何以及如何解決？

Answer 1

要設置一個進度處理程序下載，設置一個用於上傳使用

xhr.upload.addEventListener("progress", updateProgress, false);