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

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

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

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

Ruby on Rails

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

2654閲覧

rails f.file_fieldでファイルを選択後、再び選択し直す際に最初の選択を保持する

lyzmfeqpxs54

総合スコア237

Ruby

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

Ruby on Rails

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/02/18 13:06

編集2019/02/20 03:04

いつもお世話になっております。

現在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>

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問