使用JavaScript将文件附加到input type="file"的方法

Question

使用JavaScript将文件附加到input type="file"的方法

javascripthtmlhttp

5

我需要通过POST方式将由JavaScript生成的文件（最多几MB）发送到服务器。

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

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

这里的解决方案是什么？有没有办法将浏览器中的文件放入文件输入框？或者使用其他输入框可以吗？有没有一种方法可以将文件打包到POST请求中而不使用input元素？

我想要使用的工具：

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

- matousc

2

可能是Pre-Populate HTML表单文件输入的重复问题。 - Liam

2

那个问题回答了你的问题。这是不可能的。再次问同样的问题并不会改变这个事实。 - Liam

1

请展示如何创建文件。 - Alex K.

1

@Liam 对不起，我认为另一个问题很明显是关于通过浏览器从计算机中获取文件的。但我谈论的是在浏览器中创建的文件，它根本没有涉及计算机文件存储，因此这是不同的问题。 - matousc

1

@Liam，让脚本发送自己生成的二进制数据与让脚本从用户文件系统中发送文件是非常不同的。 - JJJ

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Justin MacArthur · Accepted Answer

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

来自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生成并发送到服务器的文件相同的结果。