javascript - 在 Firefox 中设置 FileInput 的 FileList

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 中，即使控制台输出中的文件列表看起来是正确的，第二个输入也不会改变。

总体目标是创建一个拖放上传界面。
Prototype here .

Answer 1

能够将 FileList 设置为 input.files属性已以编程方式添加为 an PR to the specs三个月前，即使 webkit 允许这样做多年。火狐 has landed a patch在其下一个稳定版本 57 和 Edge is probably still working on it 中(我没有帐户来查看进度)。看来它现在也登陆了 Edge。

此功能的主要用例是允许 DataTransfer.files例如，从拖放事件或粘贴事件添加到 <input> field 。因此，只允许使用 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>