如果您的HTML表单包含这样的元素:

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

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

我了解,出于安全原因,浏览器不会让JavaScript只为所选文件设置任何值,这是一件好事。

我只是想知道,一旦用户选择了文件,我想让多个表单分别执行上传。有没有一种方法可以:
  • 将输入项克隆到每个新表单中,并以编程方式删除
    每个元素的文件选择?
  • 转移他们的一些选择
    到单独的输入type = file元素,或什至以不同的形式
    屏幕?
  • 最佳答案

    如果克隆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);
      }
    })();
    

    通过上述操作,如果我选择了某项并单击“移至iframe”按钮,则输入将被移动,显然是完整的。 (克隆清除了该值,如预期的那样。)

    关于javascript - 是否可以使用JavaScript删除输入类型=文件选择?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21721475/

    10-11 12:32
    查看更多