Question

如果我打开文件选择，选择一个文件，然后再次单击文件选择，然后单击取消，它会忘记最初选择的文件

//Main input
<input type="file" class="input" id="input" name="avatar">

//Backup input
<input type="file" class="input_two" id="input_two" name="avatar_two">

是否有解决方法，可能会创建一个临时输入类并将.files复制到此文件，以便我仍然可以访问最后一个文件

$('.input').change(function () {
        var value = this.files;
        console.log(value);
        if(value.length > 0)
        {
            $(.avatar_two).assign(value)... //This is what i want to do
        }
        else
        {
            console.log("nada");
        }

这可能吗？

Answer 1

~~无法设置引用只读.files对象的<input type="file">元素的FileList属性。~~请参阅React/Javascript--FileReader/<input/>/adding image。< / p>

您可以调用File.prototype.slice()来创建File对象的副本。或使用FormData，FormData.prototype.append()存储所选文件。

var clone, i = 0;
var fd = new FormData();

$('.input').change(function() {
    var value = this.files;
    console.log(value);
    if (value.length > 0) {
        clone = value[0].slice(0, value[0].size, value[0].type);
        fd.append("file-" + (i++) /* this.name */, value[0]);
    } else {
        console.log("nada");
    }
});

Answer 2

2021 年可以通过 DataTransfer（至少是最新的 chrome/firefox）

let file = document.getElementById("file");
let back = document.getElementById("back");

file.addEventListener('change', function() {
  let files = this.files;
  let dt = new DataTransfer();
  for(let i=0; i<files.length; i++) {
    let f = files[i];
    dt.items.add(
      new File(
        [f.slice(0, f.size, f.type)],
        f.name
    ));
  }
  back.files = dt.files;
});

<input type="file" id="file" multiple>
<input type="file" id="back" multiple>

Answer 3

据我所知，出于安全原因，您不能这样做，至少要设置该值，我不知道是否可以应对或克隆，但请查看此answer

将文件输入中的文件复制/克隆到另一个输入

3 个答案: