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

【问题标题】：Why can't I upload files asynchronously?为什么我不能异步上传文件？
【发布时间】：2011-11-27 13:05:58
【问题描述】：

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

我的问题可能有点无意义，但我还是想知道为什么 ajax（或 XMLHttpRequest）不能处理这个问题？为什么不能像真正的httprequest那样传输文件？

【问题讨论】：

因为 JavaScript 不能读取本地文件——至少在没有一些 HTML 5 API 魔法的帮助下是这样。
@PeKKa 这意味着 AJAX 请求（带有 js）和表单请求（带有 html）是完全不同的东西？甚至浏览器？
并非如此——您可以使用 Ajax 构建任何类型的请求。出于安全原因，它只是访问在 JavaScript 中无法访问的本地文件。

标签： ajax file-upload

【解决方案1】：

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

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

如果你使用AJAX的原因是因为你想要一个文件上传的进度条，使用这种方法你可以使用服务器端的静态变量来存储文件上传的进度，然后使用AJAX来制作对另一个 HTTP 页面的简单定时请求，该页面仅返回上传进度。

【讨论】：

【解决方案2】：

作为一个更新的答案，以防有人用谷歌搜索这个，XMLHttpRequest level 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);
  }
});

【讨论】：