将文件从文件输入复制/克隆到另一个输入答案

【问题标题】：Copy/Clone files from File Input to another Input将文件从文件输入复制/克隆到另一个输入
【发布时间】：2026-02-02 10:40:01
【问题描述】：

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

//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");
        }

这可能吗？

【问题讨论】：

不能设置文件输入的值
函数 copy() { var myObject, f; myObject = new ActiveXObject("Scripting.FileSystemObject"); f = myObject.file.copy("c:\\test.txt", "c:\\mytest.txt"); }
ActiveX?现在是 90 年代吗？
"Uncaught ReferenceError: ActiveXObject is not defined" 在多浏览器兼容性方面做得很好。

标签： javascript jquery file input

【解决方案1】：

~~不能设置<input type="file"> 元素的.files 属性，它引用只读的FileList 对象。~~参见React/Javascript--FileReader/<input/>/adding image。

您可以调用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");
    }
});

【讨论】：

@NielsSteenbeek 好吧，这行得通，我用我选择的图像获得了克隆和 fd 值。但是，如何将其复制到备份输入中¿？
@CarlosAlbertoMartínezGadea 尝试this one
@NielsSteenbeek 感谢您的回复，但最后我的情况似乎有点复杂。我拥有的 2 个文件输入，绑定了 JS 事件，我似乎无法应对。不管怎样，谢谢你！我选择了另一种解决方法:)

【解决方案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>

【讨论】：

太棒了，完全符合我的需要！非常感谢！

【解决方案3】：

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

【讨论】：