如何在拖放后以编程方式设置文件输入值？

在页面下拉时设置文件输入值

背景

您正在开发一个支持文件选择和提交的控件通过降落到指定区域。但是，您注意到在手动提交表单之前，文件输入保持为空。

解决方案：从 JavaScript 设置文件对象

幸运的是，现代浏览器现在允许编程设置使用 files 属性的输入文件。以下是使用数据传输实现它的方法：

let target = document.documentElement;
let fileInput = document.querySelector('input');

target.addEventListener('drop', (e) => {
  e.preventDefault();
  fileInput.files = e.dataTransfer.files;
});

替代方法：FileList

您还可以从 FileList 设置文件输入值object:

let fileInput = document.querySelector('input');

fileInput.files = [file1, file2, ...];

免责声明

设置输入文件值的能力取决于数据传输或可用的 FileList 对象。与此功能相关的旧版安全风险已在现代浏览器中得到解决。

示例

可以在下面提供的代码片段中找到演示：

let fileInput = document.querySelector('input');<p>target.addEventListener('drop', (e) => {<br> e.preventDefault();<br> fileInput.files = e.dataTransfer.files;<br>});