javascript - Open several times multiple file input without losing earlier selected files -

i have multiple file input. want customers choose multiple files when click on 'choose files' (i think done) , if forget select files, want code enable selecting new files (done) , add data data have selected before (couldn't solve it).

how can append new files list?

just give context: goal after send each file ajax php server.

$("#upload-form").submit(function(e) {    $('#displayfilenames').html('');    console.log('currently in files.');    var files = $('#myfileinput')[0].files;    (var = 0; < files.length; i++){      $('#displayfilenames').append(files[i].name + '</br>');      console.log(files[i].name);    }      // send data ajax.  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id='upload-form' action='' method='post' enctype='multipart/form-data'>      <input id='myfileinput' class='file-input' type='file' name='file[]' multiple='multiple' />      <input type='submit' value="see what's in there" />  </form>  <div id="displayfilenames"></div>

any help, hint appreciated!

i believe same element cant used mentioned use. here workaround. on file input click append file input , hide current one.

             $("#seebtn").click(function(e) {        $('#displayfilenames').html('');        var domarray = document.getelementsbyclassname('file-input');        (var = 0; < domarray.length; i++) {           var files =  domarray[i].files;                   (var j = 0; j < files.length; j++){          $('#displayfilenames').append(files[j].name + '</br>');        }        };                  // send data ajax.      });   function myfunction(obj) {    $(obj).hide();    $("#upload-form").append("<input class='file-input' type='file' onclick='myfunction(this)' name='file[]' multiple='multiple' />");      }

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button value="see what's in there" id="seebtn">see</button>  <form id='upload-form' action='' method='post' enctype='multipart/form-data'>        <input id='myfileinput' class='file-input' type='file' name='file[]' onclick="myfunction(this)" multiple='multiple' />        </form>  <div id="displayfilenames"></div>