隠し入力フィールド内の配列の値を新しい配列に置き換える前に保存する方法

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ビットと、デモ用に入力が隠されていないスクリーンショットです。私は私ではなく、ユーザーがファイルの第二または第三の時間を選択したときに、それを置き換えるの入力フィールドに追加したファイル名を取得する方法を知っていただきたいと思います....あなたのそれらのため

<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) 
      } 

     }); 

});