使用 javascript 将文件附加到 input type="file"

Question

我需要将 JavaScript 生成的文件（最多几 MB）发送到服务器。我需要用 POST（不是 ajax POST）来做。

如何通过 JavaScript 将文件添加到 input type="file" 中？根据Pre-Populate HTML 表单文件输入，由于安全原因，这似乎是不可能的。但是我在浏览器中创建文件，这不应该是安全问题。

我可能可以将文件作为文本粘贴到其他类型的输入中。但我不觉得这是正确的。

这里的解决方案是什么？有没有办法将文件从浏览器放入文件输入？或者可以用其他输入来做吗？有没有办法在没有输入元素的情况下将文件打包到 POST？

我想使用的可能是：

$("#button").click(function(e) {
    $('#file').val(export_pdf());
    $('#form').submit();
});

Answer 1

无法创建文件并将其附加到 HTML 表单输入，但使用 FormData 对象，您可以将生成的文件作为发布请求的一部分发送到服务器。

从 MDN 拉取：

var formData = new FormData();

// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

这应该会得到与 JS 生成的文件发送到服务器相同的结果。