jeudi 13 août 2015

HTML File input with possibility to input several files one after another

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 fields since I have seen something similar somewhere. I tried thie 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="#">
     <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", don't know what exactly in English). So apparently my onchange() function overwrites the normal reaction, which is, the file is 'loaded' into the input element? Even though this does not seem logical to me. Can anyone help? Maybe there is a simpler solution than mine, which would of course be very welcome. Thanks in advance!



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire