Question

如果您的HTML表单包含以下元素：

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

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

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

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

将输入项目克隆到每个新表单中，然后以编程方式删除每个元素的文件选择？
转移他们的一些选择单独的输入类型=文件元素，甚至是不同的表单屏幕？

Answer 1

如果克隆input[type=file]元素，则克隆的值为空。您也无法将值从一个文件输入复制到另一个文件。

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

从根本上说，如果您想使用单独的表单单独上传文件，您需要以不同的形式开始输入，在用户进行选择之前。但显然你可以移动它们，这可以让你做你想做的事。我可能仍然可以从单独的表格开始，以避免移动它们。

有趣的是，Chrome，Firefox和IE10至少似乎非常乐意移动一个文件元素，其选择完好无损，即使是另一个文档：Live Example | Source

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

通过上述操作，如果我选择了某些内容并单击 Move to iframe 按钮，则输入将被移动，显然完好无损。（克隆按预期清除值。）

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

1 个答案: