いつもお世話になっております。
現在RailsでWebページを作成しています。
ページではinputタグ(multipule)を用いてファイルの複数のファイルがアップロードできる状態です(下記コードの状態)。
アップロードするファイルは画像であり、操作はスマートフォンで行うことを想定していおリます。
カメラロールなどで複数選択し終わると、選択画像が複数サムネイルで表示されるようになっております。
そこで質問なのですが、一度選択し終わった後に、もう一度inputタグを押して選びなおした場合、現在の選択を保持するということは可能なのでしょうか(例: カメラロールにて画像ファイルを4枚選択してファイルを確定したのち、もう一度カメラロールに行き別の画像を2枚選択した場合、前回の選択と合わせて6枚になる)。
また、サムネイル表示されている部分をタッチするとその画像がアップロードするファイルから削除されるというようなことは可能なのでしょうか。
スマートフォンのアプリ(twitterなどのSNS等)などでは、画像を複数アップロードする際に、選択ファイルを保持し、削除や変更ができると思うのですが、htmlを用いてこういったことを行うことは可能なのでしょうか(ググってみてもかなり難しいように思えてしまうのですが……)。
実現できるような方法があればご教示いただけますと幸いです。
よろしくお願いいたします。
Ruby
1 2<div class="mobile_post_image_field_index_image"> 3 <div class="mobile_post_image_field_select"> 4 <%= f.file_field :post_image, multiple: true, class: 'post_image', id: :post_image, onchange:"imageCount(event)" %> 5 <label class="file_mask"> 6 <span><%= image_tag 'mobile_syashin.png', height: 80, width: 350 %></span> 7 <input type="text" id="mask_file_02"> 8 </label> 9 </div> 10 </div> 11 12<script> 13function imageCount(event){ 14 var file_length = event.target.files.length; 15 //var file_length = document.querySelector('.post_image').files.length; 16 var video_file_count = "" 17 if (file_length == 0) { 18 //video_file_count = " " + "ファイルを選択"; 19 } else { 20 video_file_count = " " + String(file_length) + "ファイルを選択済み"; 21 } 22 document.getElementById("mobile_image_file_count").innerHTML=video_file_count; 23 24 initializeFiles(); 25 var files = event.target.files; 26 27 for (var i = 0, f; f = files[i]; i++) { 28 var reader = new FileReader; 29 reader.readAsDataURL(f); 30 31 reader.onload = (function(theFile) { 32 return function (e) { 33 /*console.log(theFile.name);*/ 34 var div = document.createElement('div'); 35 div.className = 'reader_file'; 36 /*div.innerHTML = '<div class="reader_title">' + encodeURIComponent(theFile.name) + '</div>';*/ 37 div.innerHTML += '<img class="reader_image" src="' + e.target.result + '" />'; 38 document.getElementById('list').insertBefore(div, null); 39 } 40 })(f); 41 } 42} 43</script> 44