为什么我不能异步上传文件？

Question

经过一整天的学习＆amp;＆amp;尝试，我终于通过纯AJAX放弃上传文件（ps：这篇帖子How can I upload files asynchronously with JQuery?埋没了我最后的希望）

我的问题可能有点无意义，但我仍然想知道为什么ajax（或XMLHttpRequest）无法处理这个问题？为什么文件不能像真正的httprequest一样转移？

Answer 1

出于安全原因，Javascript无法读取本地文件，因此我们无法使用AJAX发送数据。

但是，您可以POST一个标准HTML表单，并将表单目标设置为页面上不可见的iframe。然后，此iframe可以使用服务器端代码来处理上载。

如果您使用AJAX的原因是因为您在文件上传时需要进度条，使用此方法可以使用服务器端静态变量来存储文件上载的进度，然后使用AJAX进行制作一个简单的，定时的请求到另一个HTTP页面，它只返回上传进度。

Answer 2

正如有人谷歌这样的更新答案，XMLHttpRequest 2级确实支持文件输入的AJAX提交。

浏览器支持：

http://caniuse.com/xhr2

它使用FormData Javascript对象。

How to send FormData objects with Ajax-requests in jQuery?

如果您这样做，请不要忘记关闭processData和contentType。

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});