在Firefox中设置FileInput的FileList
这两个示例都适用于Chrome和Opera，但在Firefox 56.0中失败。
我想设置表单的文件输入files FileList [Codepen]
HTML
<form>
<input type="file" id="input1" multiple>
<br>
<input type="file" id="input2" multiple>
</form>
JAVASCRIPT
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
input1.onchange = function () {
console.log(input1.files);
input2.files = input1.files;
};
在Chrome和Opera上，选择第一个输入中的文件也会改变第二个输入。 在Firefox中，即使文件列表在控制台的输出中看起来是正确的，第二个输入也不会改变。
总体目标是创建一个拖放式上传界面。
原型在这里。
以编程方式将FileList设置为input.files属性的功能已在三个月前作为PR添加到规范中，即使Webkit允许这种方式使用多年。 Firefox已经在其下一个稳定版本中发布了补丁，57并且Edge可能仍在开发它（我没有账户来查看进展情况）。它似乎现在也已经登陆Edge。
此功能的主要用例是允许将DataTransfer.files从例如拖放事件或粘贴事件添加到<input>字段。 因此，只有FileList被允许（并且null来清除输入）。
因此，在您的问题的主体中暴露的情况下，我并没有真正看到在两个<input>字段之间使用此功能的要点。
如果你想保存在选定的FileList中，你总是可以将它转换为一个文件数组。
如果您希望稍后能够将填充的输入移动到<form>中，则可以使用inputElement和DOM方法直接执行。
如果您需要解决这个新功能的限制，您可以随时使用DataTransfer的文件填充FormData，并通过xhr发送此FormData，而不是使用默认的HTML表单方法。
而且由于我第一次错过了真正的用例，在codepen中，这是一个可能的实现来解决您所面临的拖放问题，即使在不支持此新功能的旧版浏览器中也是如此。
这在dropZone中使用了一个隐藏的输入，它将直接捕获掉落的文件。
// called when the input hidden in the dropZone changes
function handleDroppedChange(evt) {
this.removeEventListener('drop', handleDroppedChange); // only once
// create a new hidden input
var clone = this.cloneNode();
clone.addEventListener('change', handleDroppedChange);
clone.addEventListener('change', handleBasicChange);
this.parentNode.insertBefore(clone, this);
// replace the visible one with the current hidden one
var form = document.querySelector('form');
var previous = form.querySelector('input[type=file]');
form.insertBefore(this, previous);
form.removeChild(previous);
this.id = previous.id; // for the <label>
}
// add first listeners
var hiddenTarget = dropzone.querySelector('input[type="file"]');
hiddenTarget.addEventListener('change', handleDroppedChange);
hiddenTarget.addEventListener('change', handleBasicChange);
file_input.addEventListener('change', handleBasicChange);
// handle drop over enter leave as usual on the parent
dropzone.ondragover = dropzone.ondragenter = function(evt) {
evt.preventDefault();
dropzone.className = "drag";
};
dropzone.ondragleave = function(evt) {
evt.preventDefault();
dropzone.className = "";
};
dropzone.ondrop = function(evt) {
dropzone.className = "";
console.log("drop");
};
// will trigger for any kind of changes (dropped or manual)
function handleBasicChange(evt) {
var file_names = Array.prototype.map.call(this.files, function(f){return f.name;});
label.innerHTML = "Changed " + file_names.join('<br>');
// start upload process
};#dropzone {
display: inline-block;
padding: 25px;
border: 8px dashed #b11;
position: relative;
}
#dropzone.drag {
border-color: #f74;
}
#dropzone>input{
opacity: 0;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
/* below rules avoid clicks on hidden input */
pointer-events: none;
}
#dropzone.drag>input{
pointer-events: all;
}<form>
<input type="file" id="file_input" multiple>
</form><br><br>
<div id="dropzone">
<label id="label" for="file_input">Drop here.</label>
<!-- we use an hidden file input to catch the dropped files -->
<input type="file" multiple>
</div>