Открыть несколько файлов с несколькими файлами без потери ранее выбранных файлов

Question

У меня есть вход для нескольких файлов. Я хочу, чтобы мои клиенты выбирали несколько файлов, когда они нажимают «Выбрать файлы» (я думаю, что это сделано), и если они забывают выбрать некоторые файлы, я хочу, чтобы мой код включал выбор новых файлов (завершен) и добавлял эти данные в данные, которые они выбрали ранее (не могли решить).

Как добавить новые файлы в список?

Просто, чтобы дать вам контекст: моя цель после этого - отправить каждый файл с 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>

Любая помощь, подсказка ценится!

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