JavaScript是否可以删除文件选择的input type=file选项？

Question

如果你有一个带有以下元素的HTML表单：

<input type="file" name="file" multiple="multiple"> 

通常情况下，它允许用户选择多个文件上传，这些文件都将使用相同的表单字段名“file”发送到服务器。

我明白由于安全原因，浏览器不会让JavaScript随意设置所选文件的任何值，这是一件好事。

但我想知道，一旦用户选择了文件，我希望有多个表单依次执行上传过程。有没有办法：

• 将输入项克隆到每个新表单中，并在程序中从每个元素中删除文件选择？
• 将他们的某些选择转移到单独的input type=file元素或屏幕上的不同表单中？

- user3300462

---

也许这是使用新的文件API的情况？ - Charles

@Charles：当IE8和9死亡时，它就会消失。 :-) http://caniuse.com/#feat=fileapi - T.J. Crowder

@T.J.Crowder，伙计，你真是泼冷水啊。我还以为至少在IE9中可以实现呢。 - Charles

@Charles： :-) 好消息是，大多数使用IE9的人都在自动升级路径上，并且可能已经被转移到IE10或IE11。 IE8是个大问题，因为它是XP系统可用的最高版本（而XP不会很快消失）。这并不意味着如果浏览器支持，您就不能使用文件API并给IE8用户提供较差的用户体验。然而，仍有（远远）太多的IE8用户需要关注，可悲的是。 :-) - T.J. Crowder

Answer 1

如果克隆一个input[type=file]元素，则克隆的值为空。您还不能将一个文件输入的值复制到另一个文件输入中。

在选择文件后，我从未尝试将文件输入从一个文档移动到另一个文档。我想当您这样做时，浏览器也会清除选择，但可能不会。 （更新：测试了三个浏览器，所有浏览器都出乎意料地保留了该值。请参见下文。）

从根本上讲，如果要单独上传文件，请在用户进行选择之前将输入放在单独的表单中。但显然，您可能可以将它们移动，这将使您能够执行所需的操作。我仍然可能会开始使用单独的表单，以避免必须移动它们。

有趣的是，Chrome、Firefox和IE10至少似乎很高兴将带有其选择的文件元素移动到不同的文档中：实时示例|源代码 HTML:

<input id="theFile" type="file">
<br>Choose a file above, then either:
<br><input type="button" id="btnClone" value="Clone">
<input type="button" id="btnMove" value="Move to iframe">
<br>
<iframe id="theFrame" style="width: 99%"></iframe>

JavaScript:

(function() {
  gid("btnClone").onclick = function() {
    display("Here's the clone:");
    document.body.appendChild(gid("theFile").cloneNode(true));
  };
  gid("btnMove").onclick = function() {
    gid("theFrame").contentDocument.body.appendChild(gid("theFile"));
    display("File input moved to the iframe");
  };

  function gid(id) {
    return document.getElementById(id);
  }

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

通过上述操作，如果我选中了某个输入框并点击 移动到iframe 按钮，该输入框将被移动，且看起来没有任何变化。（如预期一样，克隆会清除该输入框的值。）

- T.J. Crowder