是否可以使用JavaScript删除输入类型=文件选择？

如果您有一个包含如下元素的HTML表单：

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

然后，通常情况下，它允许用户选择多个文件进行上传，并且它们都会以相同的表单字段名“file”发送到服务器

我知道，出于安全原因，浏览器不会让JavaScript为所选文件设置任何值，这是一件好事

我只是想知道，一旦用户选择了文件，我希望有多个表单分别执行上传。有没有办法：

• 将输入项克隆到每个新表单中，并以编程方式删除 每个元素的文件选择
• 转移他们的一些选择 到一个单独的输入类型=文件元素，或者甚至到 屏幕

---

如果克隆

输入[type=file]

元素，则克隆的值为空。也不能将值从一个文件输入复制到另一个文件输入

我从未尝试在选择文件后将文件输入从一个文档移动到另一个文档。我想当你这样做的时候，浏览器也会清除选择，但它可能不会。（更新：在测试的三种浏览器中，所有都保留了该值，这让我感到惊讶。请参见下文。）

基本上，如果您想使用单独的表单单独上传文件，那么在用户做出选择之前，您需要以单独的表单开始输入。但很明显，你可以移动它们，这会让你做你想做的事情。我可能还是从单独的表单开始，以避免移动它们

---

有趣的是，Chrome、Firefox和IE10似乎至少非常乐意将一个选择完整的文件元素移动到另一个文档中：|

HTML:

---

如上所述，如果我选择某个内容并单击Movetoiframe按钮，输入将被移动，显然是完整的。（正如预期的那样，克隆会清除该值。）

也许这是IE8和IE9失效时的情况？@Charles:会的。：-）@T.J.Crowder，老兄，我的游行真是太棒了。“我敢发誓至少是在IE9中。”查尔斯：：-）好消息是，大多数拥有IE9的人都在自动升级的道路上，可能已经被转移到IE10或IE11了。IE8是最大的痛苦，因为它是XP可用的最大值（而且XP不会很快消亡）。这并不意味着如果浏览器支持文件API，并且给IE8用户带来了较差的用户体验，那么就不能使用文件API。然而，令人遗憾的是，IE8用户仍然（远远）太多，以至于无法忽略他们。：-）

<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>

(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);
  }
})();