使用 XMLHttprequest 上传多个文件答案

【问题标题】：uploading multiple files with XMLHttprequest使用 XMLHttprequest 上传多个文件
【发布时间】：2013-01-17 23:21:49
【问题描述】：

我正在尝试制作一个以百分比为单位的异步文件上传表单。我认为这可能适用于 FormData 对象，但我认为该帖子不起作用。当我提交时没有任何反应。我已经检查过，没有错误，没有 javascript 也可以工作，所以 PHP 没问题代码有什么根本性的问题吗？

  var handleUpload = function(event){
      event.preventDefault();
      event.stopPropagation();

  var fileInput = document.getElementById('file');
  var data = new FormData();

  for(var i = 0; i < fileInput.files.length; ++i){
     data.append('file[]',fileInput.files[i]);
}
  var request = new XMLHttpRequest();
      request.upload.addEventListener('progress',function(event){
   if(event.lengthComputable){

      var percent = event.loaded / event.total;
      var progress = document.getElementById('upload_progress');

    while (progress.hasChildNones()){
           progress.removeChild(progress.firstChild);
         }
           progress.appendChild(document.createTextNode(Math.round(percent * 100) + '%'));
   }
});

           request.upload.addEventListener('load',function(event){
           document.getElementById('upload_progress').style.display = 'none';
});
           request.upload.addEventListener('error',function(event){
           alert("failed");

});
           request.open('POST','upload.php');
           request.setRequestHeader('Cache-Control','no-cache');
           document.getElementById('upload_progress').style.display = 'block';
};

           window.addEventListener('load',function(event){
           var submit = document.getElementById('submit');
           submit.addEventListener('click',handleUpload);
});

html:

<div id = "upload_progress"></div>

<form id="form" action="" method="post" enctype="multipart/form-data">
    <input id="file" name="file[]" type="file" multiple /><br>
    <input type="submit" name="send" id ="submit" value="send">
</form>

并上传.php

if(!empty($_FILES['file'])){
    foreach  ($_FILES['file']['name'] as $key => $name) {
    move_uploaded_file($_FILES['file']['tmp_name'][$key],"myfiles/$name");
  }
}

【问题讨论】：

标签： php javascript html xmlhttprequest

【解决方案1】：

您忘记了 javascript 代码中最重要的一行：

request.send(data);

之后：

request.setRequestHeader('Cache-Control','no-cache');

【讨论】：

我不敢相信我忘记了这一点。果然它现在可以工作了。非常感谢你看到这个。

【解决方案2】：

之后

request.setRequestHeader('Cache-Control','no-cache');

你忘记发送数据了..

request.send(data);

顺便说一句，您需要发送正确的标头

request.setRequestHeader("Content-type", ,,,
request.setRequestHeader("Content-length",...
request.setRequestHeader("Connection", "close");

【讨论】：

您实际上不想设置 Content-type 或 length，它们将被自动处理。在 Content-type 的情况下，执行多部分表单实际上会中断，因为不会设置“边界”属性。