javascript - 多次打开多个文件输入而不丢失先前选择的文件

我有一个多文件输入。我希望我的客户在点击“选择文件”时可以选择多个文件（我想已经实现了），如果他们忘记选择一些文件，我希望我的代码能够允许选择新的文件（已经实现）并将这些数据添加到他们之前选择的数据中（无法解决）。

我如何将新文件添加到列表中？

只是给你一些背景信息：我之后的目标是使用 AJAX 将每个文件发送到我的 PHP 服务器。

$("#upload-form").submit(function(e) {
  $('#displayFileNames').html('');
  console.log('Currently in files.');
  var files = $('#myFileInput')[0].files;
  for (var i = 0; i < files.length; i++){
    $('#displayFileNames').append(files[i].name + '</br>');
    console.log(files[i].name);
  }

  // Send data with 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>

任何帮助或提示都非常感谢！

答案＃1

我认为同一个元素不能用于所提到的用途。这里有一个解决方法。在点击文件输入时，添加另一个文件输入并隐藏当前的文件输入。

 

  

  $("#seebtn").click(function(e) {
      $('#displayFileNames').html('');
      var domArray = document.getElementsByClassName('file-input');
      for (var i = 0; i < domArray.length; i++) {
         var files =  domArray[i].files;
       
        for (var j = 0; j < files.length; j++){
        $('#displayFileNames').append(files[j].name + '</br>');
      }
      };
      

      // Send data with 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>