Question

我正在寻找在HTML表单中连续输入多个文件的可能性。令我感到震惊的是，似乎没有简单的解决办法（或者至少我已经能够找到它，尽管经过几个小时的搜索）。如果我在multiple中使用<input type="file" name="myFiles[]" multiple />属性，我可以一次选择多个文件，但是如果我首先选择一个文件，则再次单击输入字段并选择另一个，第二个文件似乎覆盖了第一个文件。所以我想我可能会尝试使用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>

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

Answer 1

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

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

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

1 个答案: