質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2205閲覧

input file に複数件の情報を入れて送りたい

dossy

総合スコア109

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/08/02 12:38

今、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も貼っときます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

formのinputを増やすのではなく、初めから4つ用意しておき、3つは隠しておく。
一つ入る毎に一つ display: block する
というのではどうでしょう。

投稿2019/08/03 09:24

winterboum

総合スコア23329

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dossy

2019/08/04 06:54

やはり、その方法でやるしかなさそうですよね。 その場合は、最初の一つだけどうやってnoneをつけるのでしょうか?
winterboum

2019/08/04 06:56

4つしかないし、数も固定ですからviewにハードコードでは駄目ですか?
dossy

2019/08/05 02:17

ベタがきで、一度やってみます。 数が10こなどの時は、また別の質問をさせてもらいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問