HTML 文件输入，可以一个接一个地输入多个文件答案

【问题标题】：HTML file input with possibility to input several files one after anotherHTML 文件输入，可以一个接一个地输入多个文件
【发布时间】：2015-08-13 23:16:05
【问题描述】：

我正在寻找一种在 HTML 表单中连续输入多个文件的可能性。令我震惊的是，似乎没有简单的解决方案（或者至少尽管搜索了几个小时，我还是找不到它）。如果我在<input type="file" name="myFiles[]" multiple /> 中使用multiple 属性，我可以按住Ctrl 一次选择多个文件，但是如果我先选择一个文件，然后再次单击输入字段并选择另一个，第二个文件似乎覆盖第一个。所以我想我可能会尝试使用 javascript 添加更多 <input type="file" name="myFiles[]" /> 字段（同名），因为我在某处看到过类似的东西。我尝试了以下方法：
JavaScript：

function addInputFileEle() {
    var field = document.getElementById("filesField");
    var row = '<input type="file" name="myFiles[]" onchange="addInputFileEle();" />';
    field.innerHTML += row; // add one more <input type="file" .../> element
}

HTML：

<form method="post" action="#" enctype="multipart/form-data">
     <fieldset id="filesField"> <!--for adding more file-input rows-->
         <input type="file" multiple name="myFiles[]" class="multi" onchange="addInputFileEle();" />
     </fieldset>
     <input type="submit"/>
 </form>

当我单击其中一个并选择一个文件时，该文档确实会创建其他文件输入元素，但是：该文件没有被上传！我的意思是，在我选择文件后，文件名不会显示，而是仍然显示“选择文件”（或“选择文件”，不确定英文）。所以显然我的onchange="addInputFileEle()" 覆盖了正常反应（文件被“加载”到输入元素中）？尽管这对我来说似乎不合逻辑。任何人都可以帮忙吗？为什么文件最终没有被选中？或者也许有比我的更简单的解决方案，这当然会非常受欢迎。提前致谢！

【问题讨论】：

看着它，它重新渲染了字段集，因此清除了值。
@CodingWithClass 哦，是的，你是对的......这很快，谢谢！你知道这个多文件上传的任何标准解决方案吗？
您可以使用 appendChild 而不是 innerHTML。我做了一个相同的解决方案：jsfiddle.net/tfrqwre9
尝试查看您的控制台是否记录了任何内容@PeterMöhrenbart
@JoshuaK 我按照你的建议使用了 appendChild，现在它可以工作了，非常感谢！！不知何故，我无法使您在小提琴上发布的代码正常工作，那里没有显示新的输入元素（不是 100% 确定我是否按照您的意思使用它）

标签： javascript html file input

【解决方案1】：

好的，我将发布我的解决方案，以防其他人正在寻找一种方法来逐个选择多个文件进行上传。正如@CodingWithClass 指出的那样，我正在使用parentElement.innerHTML += additionalInputElement; 之类的东西来重置输入字段。相反，我应该按照@JoshuaK 的建议使用 appendChild：

<html>
    <head>
        <meta charset="UTF-8">
        <script>
            function addFileInput(fieldsetName, firstInputId) {
                var fs = document.getElementById(fieldsetName);
                // only add one if the last file-input field is not empty
                if(fs.lastElementChild.value != '') {
                    var firstInputFile = document.getElementById(firstInputId);
                    var newInputFile = document.createElement("input");
                    newInputFile.type = firstInputFile.type;
                    newInputFile.name=firstInputFile.name;
                    newInputFile.multiple=firstInputFile.multiple;
                    newInputFile.class = firstInputFile.class;
                    newInputFile.onchange=firstInputFile.onchange;
                    fs.appendChild(newInputFile);
                }
            }
        </script>
        <title>MultiFile-Testing</title>
    </head>
    <body>

<?php print_r($_FILES); // see if files were uploaded in the previous round ?> 

        <form method="post" action="#" enctype="multipart/form-data">
            <fieldset id="filesFS">
                <input type="file" multiple name="myFiles[] id="firstInputFile" onchange="addFileInput('filesFS', 'firstInputFile');" />
            </fieldset>
            <input type="submit"/>
        </form>
    </body>
</html>

【讨论】：