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

Question

我正在寻找以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()"覆盖了正常的反应（文件被“加载”到输入元素中）？ 即使这对我来说似乎不合逻辑。 有人可以帮忙吗？ 为什么最后没有选择文件？ 或者，也许有比我的解决方案更简单的解决方案，这当然是非常受欢迎的。 提前致谢！

Answer 1

好吧，我将发布解决方案，以防其他人正在寻找一种选择几个文件的方法，以一种一个地上传。 正如@CodingWithClass指出的那样，我正在通过使用诸如parentElement.innerHTML += additionalInputElement; AdditionalInputElement parentElement.innerHTML += additionalInputElement;类的东西来重置输入字段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 个解决方案

解决方案1
0 2015-08-14 00:22:21

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

问题描述

1 个解决方案

解决方案1 0 2015-08-14 00:22:21

解决方案1
0 2015-08-14 00:22:21