いつもお世話になっております。
現在RailsでWebページを作成しています。現在f.file_field(htmlでいうinupt)でファイル(画像の予定)を複数選択し、それをサムネイルとして表示している状態です。
実現したいことはで選択できるファイル(画像)の枚数に制限をかける、とういことと、一度選択した後、もう一度選択する際に、いままでに選択したファイルを保持したいというものです。
ユーザー側はiPhone、ファイル選択でカメラロールから画像を選択することを想定しております。
JAVASCRIPTなどでできそうだとは考えているのですが、参考になるサイトでも構いませんのでご教示いただけますと幸いです。
よろしくおねがいします。
追記
f.file_field(htmlでいうinupt)にこだわっているわけではないので、別の方法で実現できるのであればそちらをご教示いただけますと幸いです。
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>
あなたの回答
tips
プレビュー