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

Question

在我当前的页面上，我使用带输入元素的旧文件上传。然而，现在我已经从那个非常好的系列文章中实现了拖放: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);

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