选择更多文件时如何在输入文件对象上保持选择要上传的文件？

Question

我正在尝试制作一个上传页面，能够在上传之前多次预览、添加和删除文件。 就预览而言，我做到了。但是一旦上传，它只会上传文件输入选择器从本地存储中最后选择的文件列表中存在的文件！ 例如失败的尝试！处理照片后的预览部分我只剩下 10 张照片，但当我上传它们时，它只上传 3 张图像：

FileList {0: File, 1: File, 2: File, length: 3}
    0: File {name: '3-9.jpg.webp', lastModified: 1657529033690, lastModifiedDate: Mon Jul 11 2022 13:13:53 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 31082, …}
    1: File {name: '10-1-2.jpg.webp', lastModified: 1657529077864, lastModifiedDate: Mon Jul 11 2022 13:14:37 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 47664, …}
    2: File {name: '11-4.jpg.webp', lastModified: 1657529004794, lastModifiedDate: Mon Jul 11 2022 13:13:24 GMT+0430 (Iran Daylight Time), webkitRelativePath: '', size: 49742, …}
    length: 3
    [[Prototype]]: FileList

Answer 1

我会为此使用多个文件控件。当您选择时，隐藏并显示它。在服务器端，从所有输入文件（名为

file0

、

file1

等）获取所有文件。

var arr_files = [];
var arr_inputs = []
var index = 0;
var file_inputs = document.querySelector(".file_inputs");

function changed(file_input) {
  var files = (file_input.files);
  Object.values(files).forEach(function(file) {
    arr_files.push(file.name);
  })
  // console.log(arr_files);
  var input = document.querySelector("[name='file" + index + "']");
  index++;
  var next = createElementFromHTML(input.outerHTML);
  next.setAttribute('name', 'file' + index);
  file_inputs.appendChild(next);
  input.style.display = 'none';
}


function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

function do_submit(form) {
  console.log(arr_files)
  console.log(form.elements)
}

<form onsubmit="do_submit(this); return false">
  <p>
    Choose some files, then choose some more.
  </p>

  <div class="file_inputs">
    <input type="file" class="file" name="file0" multiple onchange="changed(this)">
  </div>
  <br>
  <input type="submit">
</form>