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

Question

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

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

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

Answer 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实现通常无法正常工作。