Javascript 在Firefox中设置FileInput的文件列表

这两个例子都适用于Chrome和Opera，但在Firefox 56.0中失败

我想设置表单文件输入的

文件
文件列表。[]

HTML
在Chrome和Opera上，选择第一个输入中的文件也会更改第二个输入。在Firefox中，第二个输入不会改变，即使控制台输出中的文件列表看起来是正确的

总体目标是创建拖放上传界面。

.
以编程方式将文件列表设置为
输入.files
属性的功能在三个月前就已经添加，即使webkit允许这样做多年。Firefox的下一个稳定版本是57和Edge（我没有看到进展的账户）。现在它似乎也登陆了Edge

此功能的主要用例是允许将拖放事件或粘贴事件中的
数据传输.file
添加到
字段中。因此，只允许使用文件列表（和
null
清除输入）

因此，在您的问题主体中暴露的情况下，我并不认为在两个
字段之间使用此功能有什么意义

如果要在内存中保留选定的文件列表，则始终可以将其转换为文件数组

如果希望以后能够在
中移动填充的输入，可以直接使用inputElement和DOM方法

如果您需要解决此新功能所利用的限制，您可以始终使用数据传输的文件填充FormData，并通过xhr发送此FormData，而不是使用默认的HTML表单方法


由于我第一次错过了真正的用例，在codepen中，这里有一个可能的实现来解决您面临的拖放问题，即使在不支持此新功能的旧浏览器上也是如此

这在dropZone中使用了一个隐藏的输入，它将直接捕获被删除的文件


//在dropZone中隐藏的输入更改时调用
功能处理的更改（evt）{
this.removeEventListener（'drop'，handleDroppedChange）；//仅一次
//创建新的隐藏输入
var clone=this.cloneNode（）；
clone.addEventListener（'change'，handleDroppedChange）；
clone.addEventListener（'change'，handleBasicChange）；
this.parentNode.insertBefore（克隆，this）；
//将可见的替换为当前隐藏的
var form=document.querySelector（'form'）；
var previous=form.querySelector（'input[type=file]'）；
表单。在之前插入（本，之前）；
表格：removeChild（先前）；
this.id=previous.id；//用于
}
//添加第一个侦听器
var hiddenTarget=dropzone.querySelector（'input[type=“file”]”）；
hiddenTarget.addEventListener（'change'，handleDroppedChange）；
HiddentTarget.addEventListener（“更改”，把手基座更改）；
文件输入。addEventListener（'change'，handleBasicChange）；
//在父对象上处理“按常规输入休假”下拉列表
dropzone.ondragover=dropzone.ondragenter=函数（evt）{
evt.preventDefault（）；
dropzone.className=“拖动”；
};
dropzone.ondragleave=函数（evt）{
evt.preventDefault（）；
dropzone.className=“”；
};
dropzone.ondrop=函数（evt）{
dropzone.className=“”；
控制台日志（“下降”）；
};
//将触发任何类型的更改（删除或手动）
功能手柄底座更换（evt）{
var file_names=Array.prototype.map.call（this.files，函数（f）{return f.name；}）；
label.innerHTML=“Changed”+文件名.join（“
”）；
//开始上传过程
};
#dropzone{
显示：内联块；
填充：25px；
边框：8px虚线#b11；
位置：相对位置；
}
#dropzone.drag{
边框颜色：#f74；
}
#dropzone>输入{
不透明度：0；
位置：绝对位置；
身高：100%；
宽度：100%；
左：0；
排名：0；
/*下面的规则避免点击隐藏的输入*/
指针事件：无；
}
#dropzone.drag>input{
指针事件：全部；
}




在这里下车。

<form>
  <input type="file" id="input1" multiple>
  <br>
  <input type="file" id="input2" multiple>
</form>

var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");

input1.onchange = function () {
  console.log(input1.files);
  input2.files = input1.files;
};