在Firefox

Question

这两个示例均可在 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 在控制台的输出中显示正确，第二个输入也不会改变。

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

Answer 1

三个月前，以编程方式将FileList设置为input.files属性的功能已添加为an PR to the specs，即使webkit允许这样做多年。 Firefox has landed a patch在其下一个稳定版本中，57和Edge is probably still working on it（我没有帐户可以查看进度）。 它似乎已经登陆了在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>