JavaScript多文件上传技术问询：能否用fileList设置input-image的值？

首先直接给你答案：不允许直接设置input的files属性为自定义的FileList对象，这是浏览器的安全限制导致的。

背后的原因 #

浏览器为了保护用户隐私，将input[type="file"]的files属性设置为只读的。也就是说，你只能读取这个属性的值（比如获取用户选中的文件），但不能通过脚本直接修改它——这是为了防止恶意脚本未经用户允许就往表单里添加或修改文件。当你尝试给它赋值时，浏览器会抛出类似TypeError: Cannot assign to read only property 'files' of object '#<HTMLInputElement>'的错误。

针对你的场景的解决方案 #

既然不能直接修改input的files，那我们可以换一种思路：自己维护一个文件数组来管理选中的图片，然后在提交时通过FormData来组装要上传的文件。具体步骤如下：

1. 维护自定义文件数组
   不用依赖input的files，而是创建一个数组来存储用户选中并经过筛选的文件：

   // 初始化数组，用来保存最终要提交的文件
   let selectedFiles = [];
   

2. 处理文件选择事件
   当用户选择文件时，把选中的文件添加到自定义数组中，然后渲染预览：

   const fileInput = document.getElementById('image-input');
   fileInput.addEventListener('change', (e) => {
     // 将选中的文件添加到数组中
     Array.from(e.target.files).forEach(file => {
       selectedFiles.push(file);
     });
     // 调用预览渲染函数
     renderImagePreviews();
   });
   

3. 实现预览和移除功能
   基于自定义数组渲染预览图，移除时直接操作数组并更新预览：

   function renderImagePreviews() {
     const previewContainer = document.getElementById('preview-container');
     previewContainer.innerHTML = ''; // 清空旧的预览
   
     selectedFiles.forEach((file, index) => {
       const imgWrapper = document.createElement('div');
       const img = document.createElement('img');
       const removeBtn = document.createElement('button');
   
       // 生成预览图
       img.src = URL.createObjectURL(file);
       img.alt = `预览图 ${index + 1}`;
       removeBtn.textContent = '移除';
       removeBtn.addEventListener('click', () => {
         // 从数组中删除对应文件
         selectedFiles.splice(index, 1);
         // 更新预览
         renderImagePreviews();
       });
   
       imgWrapper.appendChild(img);
       imgWrapper.appendChild(removeBtn);
       previewContainer.appendChild(imgWrapper);
     });
   }
   

4. 提交时组装文件
   提交表单时，使用FormData把自定义数组里的文件添加进去，然后通过AJAX提交：

   const submitBtn = document.getElementById('submit-btn');
   submitBtn.addEventListener('click', (e) => {
     e.preventDefault(); // 阻止原生表单提交
   
     const formData = new FormData();
     // 将数组中的文件添加到FormData，字段名对应后端接收的名称
     selectedFiles.forEach(file => {
       formData.append('uploaded_images[]', file);
     });
   
     // 用fetch发送请求
     fetch('/your-upload-endpoint', {
       method: 'POST',
       body: formData
     })
     .then(res => res.json())
     .then(data => {
       console.log('上传成功！', data);
       // 上传成功后的操作，比如清空数组和预览
       selectedFiles = [];
       renderImagePreviews();
     })
     .catch(err => console.error('上传失败:', err));
   });
   

补充说明 #

如果你的项目必须使用原生表单提交（不使用AJAX），这种情况下无法修改input的files，只能通过隐藏原始input，在用户移除文件时动态创建新的input元素来模拟，但这种方式复杂度较高，不如上面的AJAX方案灵活。

内容的提问来源于stack exchange，提问作者JayK