使用 XMLHttpRequest Level 2 模拟文件表单提交

【问题标题】：Simulate file form submission with XMLHttpRequest Level 2使用 XMLHttpRequest Level 2 模拟文件表单提交
【发布时间】：2012-04-15 08:25:29
【问题描述】：

在我当前的页面上，我使用带有输入元素的旧文件上传。但是，现在我已经从那个非常好的系列文章中实现了拖放：http://www.sitepoint.com/html5-file-drag-and-drop/

有一个障碍。在重写页面之前，我使用文件和服务器端服务（Java 的appspot.com）提交表单，完成了检索文件、保存到数据库等的所有魔法。我仍然想利用该服务。然而现在，在重写文件上传以使用 XMLHttpRequest 后，我的代码只是将文件写入内容，而服务需要表单。

有没有办法用 XMLHttpRequest 模仿 miltipart/form-data 表单提交？

【问题讨论】：

标签： http http-headers xmlhttprequest

【解决方案1】：

FormData 对象可用于提交multipart/form-data 表单。

基本示例：

var fd = new FormData(); // Optionally: new FormData(htmlFormElement);
fd.append('key', 'value');
fd.append('file', reference_to_File_object);
                  //  ^ Example: .files property of an <input type="file"

var xhr = new XMLHttpRequest();
xhr.open('post', '/postdata', true);
xhr.send(fd);

当字符串被传递到XMLHttpRequest 实例的.send() 方法时，它被转换为 unicode，然后编码为 UTF-8。这意味着使用字符串的自定义 multipart/form-data 实现通常无法正常工作。

【讨论】：