Как сохранить значения массива в скрытом поле ввода до его замены новым массивом

Question

У меня есть приложение, в котором пользователи могут загружать изображения в базу данных через форму. Можно загрузить максимум 6 фотографий. Пользователь может либо выбрать 6 фотографий одновременно, либо выбрать фотографии по отдельности максимум 6 раз перед отправкой формы. Затем у меня есть скрытое поле ввода, которое получает имя файла, указанное ниже.

<div id="content" > 
    <input type="file" name="files[]" id="filer_input2" multiple> 
    <input type="hidden" class="mediafile" name="mediafile"/> 
</div> 

Проблема заключается в том, что пользователь нажимает на область загрузки, а скрытое поле ввода теряет ранее сохраненные данные. Ниже приведен бит jquery и скриншот без ввода скрытых для демонстрации. Я хотел бы знать, как я могу получить имена файлов, добавленные в поле ввода вместо замены его, когда пользователь выбирает файл 2-го или 3-й раз ....

<script> 
$(document).ready(function(){ 
      $('#filer_input2').change(function(){ 

     var files = $(this)[0].files; 
     var output = ""; 
     if(files.length > 0){ 

     for (var i = 0; i < files.length; i++) { 
      output += files[i].name+","; 
     } 

     $(".mediafile").val(output); 

      } 
     }); 
}); 
</script> 

Answer 1

Для тех из вас, имея эту проблему, ниже, как я исправил это:

$(document).ready(function(){ 

     $('#filer_input2').on('change',function(){ 
      if(!$(".mediafile").val()){ 
     var files = $(this)[0].files, 
      output = ""; 
     for (var i = 0; i < files.length; i++) { 
      output += files[i].name+","; 
     }   
     $(".mediafile").val(output); 

      }else if($(".mediafile").val()){      
       var prev_input_file = $(".mediafile").val(); 
       var new_files = $(this)[0].files, 
       new_output = ""; 
       for (var j = 0; j < new_files.length; j++){ 
       new_output += new_files[j].name+ ","; 
       } 
      $(".mediafile").val(new_output + prev_input_file) 
      } 

     }); 

});