如何通过JavaScript向<input type="file">元素添加文件列表

现有HTML代码：

<input type="file" id="ex_file" name="ex_file" accept=".jpg,.jpeg,.tif" />

JavaScript代码：

fileList = [file, file,..., file]; // 由多个标准File对象组成的数组

需求：通过JavaScript将上述fileList赋值给<input>元素的files属性，但直接使用document.getElementById("#ex_file").files = fileList;无法实现，求可行方法。

input[type=file]的files属性是只读的FileList对象，无法直接赋值数组，需通过DataTransfer对象模拟文件选择流程：

1. 修正DOM选择器错误：getElementById方法无需添加#前缀，直接传入ID字符串即可。
2. 构造包含目标文件的DataTransfer：

// 获取input元素
const input = document.getElementById('ex_file');
// 创建DataTransfer对象
const dataTransfer = new DataTransfer();
// 将fileList中的文件逐个添加到DataTransfer
fileList.forEach(file => {
  dataTransfer.items.add(file);
});
// 将DataTransfer的files赋值给input的files属性
input.files = dataTransfer.files;

额外说明 #

• 必须保证fileList中的每一项都是标准的File对象，不能是普通自定义对象
• 该方案支持Chrome、Firefox、Edge等现代浏览器，不兼容IE
• 此操作不会自动触发input的change事件，若需要触发，可手动调用：

input.dispatchEvent(new Event('change'));

内容的提问来源于stack exchange，提问作者Ji's