如何使用javascript File对象模拟表单提交

Question

所以我有一个文件对象，它是从桌面拖放到一个区域中创建的。现在一切都很顺利，直到我不得不通过Ajax将它上传到Django后端。我想利用好的Django实用程序，比如request。文件等

现在，我正在处理一些现有的代码：

xhr.open("post", s.post, true);
            // Set appropriate headers
            xhr.setRequestHeader("content-type", "multipart/form-data");
            xhr.setRequestHeader("x-file-name", file.fileName);
            xhr.setRequestHeader("x-file-size", file.fileSize);
            xhr.setRequestHeader("x-file-type", file.
            xhr.send(file);

尽管我可能会尝试，但它似乎并没有模仿提交文件的表单。有什么东西我遗漏了吗？

谢谢！

Answer 1

您需要创建一个"FormData"对象，然后将文件作为参数附加到该对象。

    var fd = new FormData();
    fd.append("theFile", yourFileObject);
    //
    // ... set up the xhr ...
    //
    xhr.send(fd);

显然，这只适用于HTML5环境，但如果你正在处理文件的问题，那可能就是你要处理的问题。

Answer 2

很遗憾，您无法使用XmlHttpRequest对象上载文件，因为它不受支持。

有一些棘手的解决方法（比如使用iFrame），最近有一个新的文件api(https://developer.mozilla.org/en/using_files_from_web_applications)用于支持它的浏览器的HTML5。

如果你在stackoverflow上搜索更多，你可以找到如何解决问题的例子。