简单的 XHR 文件上传不传输文件答案

【问题标题】：simple XHR file upload doesn't transmit files简单的 XHR 文件上传不传输文件
【发布时间】：2013-10-30 02:13:46
【问题描述】：

upload.php 脚本的$_FILES 变量保持零长度。为什么文件没有发送？不过，一切似乎都井井有条。我想删除表单并完全通过onchange 处理程序执行上传。这可能吗？

<li>upload:<form id=upload enctype="multipart/form-data">
<input type=file id=file name=o onchange="submit()"/>
</form></li>

<script>
document.getElementById('upload').submit=function(){
var ul=document.getElementById('file');
if(ul.files.length>0){
  file=ul.files[0];
  var x=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
  x.onreadystatechange=function(){if(x.readyState==4&&x.status==200){
    alert(x.responseText);}
  }
  x.open('post','upload.php',true);
  x.setRequestHeader('Content-Type','multipart/form-data');
  x.setRequestHeader('X-File-Name',file.name);
  x.setRequestHeader('X-File-Size',file.size);
  x.setRequestHeader('X-File-Type',file.type);
  x.send(file);
}
return false;
}

【问题讨论】：

upload 和 submit 函数是什么？
你要使用.onsubmit！
onSubmit 和submit 是一样的，浏览器兼容性我还没看
嗯，他们不是，这可能是你的问题的原因。
更改为 onSubmit 会产生完全相同的结果：表单是异步发送的，但 $_FILES 数组是空的。到目前为止，还没有找到任何关于差异的文档，但问题似乎出在其他地方。

标签： javascript file-upload xmlhttprequest

【解决方案1】：

试试FormData，它会自行设置标题。

var formData = new FormData();
formData.append("Filedata", document.getElementById("file").files[0]);

var x=(window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
x.onreadystatechange=function(){if(x.readyState==4&&x.status==200){
   alert(x.responseText);}
}
x.open("POST", url);
x.send(formData);

【讨论】：