使用JavaScript将文件附加到输入框

Question

我有一个用于上传文件的输入框

<input type="file" name="comment[video_file]" id="comment_video_file">

能否通过JavaScript附加文件?

我尝试过，但没有成功。

    let file = new File([videoBlob], "video.mp4", { type: "video/mp4" });
    let element = document.getElementById("comment_video_file");
    element.append("video", video);

如果我在添加元素后对其进行控制台日志记录，它看起来像这样。

<input type="file" name="comment[video_file]" id="comment_video_file">
  "video"
  "[object File]"
</input>

- sara lance

---

据我所知，输入中的“files”属性是只读属性。 - Taplar

你不能这样做，输入只能包含用户自己从计算机/设备上的文件系统直接选择的文件。如果您需要上传此 blob，则可以使用 JavaScript 进行操作，但不能通过此方法实现。 - ADyson

那么，我不能将它附加到输入或表单上吗？我该怎么办？ - sara lance

那么，我不能将它附加到输入或表单上吗？我该怎么办？正如先前所述，你不能这样做。这是一项安全限制。文件必须由用户选择。 - gforce301

“我该怎么做？”通常是通过在FormData对象中发送数据来实现AJAX。进行一些自己的研究可以帮助您发现这一点，并发现一些示例。 - ADyson

Answer 1

不能直接创建一个文件并将其附加到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://example.com/submitform.php");
request.send(formData);

这会让你得到与通过JS生成并发送到服务器的文件相同的结果。

- UI_Dev

Answer 2

MDN文章关于文件输入指出：

在所有现代浏览器中，您可以设置和获取HTMLInputElement.files的值；这最近被添加到Firefox中，版本为57。

我尝试将input.files设置为拖放文件事件中的files属性，并且它起作用了。虽然我不确定是否可以使用手动创建的File来实现它。

如果这样做不起作用，请尝试使用FormData发送带有文件Blob的XMLHttpRequest，如其他答案/评论中建议的那样。

- kos