找到你要的答案

Q:HTML file input with possibility to input several files one after another

Q:HTML文件的输入可能输入几个文件一个接一个

I'm looking for a possibility to input several files in a row in an HTML form. It strikes me that there seems to be no easy solution for this (or at least I haven't been able to find it despite several hours of searching). If I use the multiple attribute in an <input type="file" name="myFiles[]" multiple />, I can choose several files at a time holding Ctrl, but if I choose one file at first, then click the input field again and choose another one, the second file seems to overwrite the first one. So I thought I might try to use javascript to add more <input type="file" name="myFiles[]" /> fields (with the same name), since I have seen something similar somewhere. I tried the following:
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>

The document indeed does create additional file-input elements whenever I click on one of them and select a file, BUT: The file does not get uploaded! I mean, after I select the file, the file name does not get displayed, instead, it still says "Choose a file" (or "Select a file", not sure about English). So apparently my onchange="addInputFileEle()" overwrites the normal reaction (the file getting 'loaded' into the input element)? Even though this does not seem logical to me. Can anyone help? Why does the file not get selected in the end? Or maybe there is a simpler solution than mine, which would of course be very welcome. Thanks in advance!

I'm looking for a possibility to input several files in a row in an HTML form. It strikes me that there seems to be no easy solution for this (or at least I haven't been able to find it despite several hours of searching). If I use the multiple attribute in an <input type="file" name="myFiles[]" multiple />, I can choose several files at a time holding Ctrl, but if I choose one file at first, then click the input field again and choose another one, the second file seems to overwrite the first one. So I thought I might try to use javascript to add more <input type="file" name="myFiles[]" /> fields (with the same name), since I have seen something similar somewhere. I tried the following:
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>

该文件确实创建额外的文件输入元素每当我点击其中之一,并选择一个文件,但:该文件没有得到上传!我的意思是,在我选择文件后,文件名不会显示,相反,它仍然会说“选择文件”(或“选择文件”,对英语不确定)。所以,显然我的变化=“addinputfileele()”覆盖的正常反应(文件被载入到输入元)?即使这对我来说似乎不合乎逻辑。有人能帮忙吗?为什么文件最终没有被选中?也许有比我更简单的解决方案,当然这是非常受欢迎的。先谢谢了。

answer1: 回答1:

Ok I will just post my solution in case anyone else is searching for a way to select several files for upload one by one. As @CodingWithClass pointed out, I was resetting the input field by using something like parentElement.innerHTML += additionalInputElement;. Instead, I should have used appendChild as @JoshuaK suggested:

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

好的,我将张贴我的解决方案,以防其他人正在寻找一种方法来选择几个文件上传一个接一个。“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>
javascript  html  file  input