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);
?>

首先，在制作实际进度条之前，我只想显示上传的数量和总字节数。但是，如果updateProgress没有回应任何内容，则函数upload.php不会被调用（例如，如果我添加echo "something";）e.loaded和e.total是小数字相同值，与文件大小无关。

文件上传本身工作正常，即使是大文件（几百MB）。对于大文件，我注意到函数updateProgress只在上传完成后调用一次。

为什么此事件处理的行为与此类似，以及如何解决？

Answer 1

您正在设置下载进度处理程序，以设置一个上传使用

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

AJAX文件上传中加载和总计的无意义值

1 个答案: