今、railsで1つのformで複数のmodelに保存する方法を用いて、画像を複数件投稿させる処理を書いています。
こんなformで複数件画像を表示させ、inputにも入れたい。
しかし、inputにはどうも、一件だけしか情報が入らないらしく、どうしたものかと考え中です。
inputにいきなり、複数件情報を入れ込むと配列で取れるのですが、
一件一件clickして、inputの中身にfileを入れこむと、最後の一件しか取得してきません。
どのようにすれば、複数件inputに情報が入って、送れますか?
formのinputを増やす方法を考えましたが、どうもインスタンスを複数件作らないとイケナイため、見た目的によくないです。
何か、いい方法はないでしょうか?
productForm__field.productForm__field--top = f.label :画像 %span.formRequired 必須 %br/ %p 最大4枚までアップロード %ul.formUploader = f.fields_for :images do |i| #list %li.form-area = i.label :image,class: "dropzone-box" = i.file_field :image, multiple: true, name: "images[image][]",class: "upload-image"
$(document).on('change', 'input[type= "file"].upload-image',function(event) { // imageがinputに入ったら var file = $(this).prop('files')[0]; console.log(file) // fileを取得 var reader = new FileReader(); //filereaderのインスタンス作成 inputs.push($(this)); //配列にfileをpush var img = $(`<div class= "img_view"><img class="picture"></div>`); // imgclassを持つ変数を定義 reader.onload = function(e) { //onloadでfileを読み込む var btn_wrapper = $('<p class="btn_left">編集</p><p class="btn_right">削除</p>'); //削除などのボタンのclassを定義 img.append(btn_wrapper); // imgclassを持つ変数にボタンをappend img.find('img').attr({ // imgからimgを探しsrcをresultとして返す src: e.target.result }) } reader.readAsDataURL(file); //readerでfilefileを取得 images.push(img); // 配列にボタンがついたhtmlを入れ込む preview.css({ 'width': '+=157.5px' }); dropzone.css({ 'float' :'right' }); if(images.length == 4) { dropzone_box.css({ 'display': 'none' }) } $.each(images, function(index, image) { image.attr('data-image', index); preview.append(image); }) dropzone.css({ 'width': `calc(100% - (157.5px * ${images.length}))` }); とりあえず、jqも貼っときます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/04 06:54
2019/08/04 06:56
2019/08/05 02:17