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

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

2回答

2949閲覧

html rails ファイルのアップロードを行う際に、選択ファイルを変更・削除、および、選びなおし時に保持を行う

lyzmfeqpxs54

総合スコア237

Ruby

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

Ruby on Rails

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2019/02/21 01:37

編集2019/02/21 04:26

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

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

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

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

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

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

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

kei344

2019/02/21 03:41

「現在の選択を保持」の部分を具体的に質問文に追記していただけませんか?
lyzmfeqpxs54

2019/02/21 04:26

早速のご回答ありがとうございます。例を追記しました。
kei344

2019/02/21 04:27

細かいですが、ここは「質問への追記・修正の依頼」ですので、「回答」ではありません。
guest

回答2

0

それは「type=fileに初期値」とイコールになると思うのですが、
無理です。

ブラウザによっては外部から空にすることすらできないものもあります。

投稿2019/02/21 02:37

m.ts10806

総合スコア80850

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

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

0

Railsは特にわかりませんが、FormDataを使ってAjaxで処理するなら可能だと思います。

  1. アップロードされたら変数に保存しておく
  2. 画像をクリックした時に当該変数を消す
  3. 送信時にAjaxを使用、ページ移動したければ、コールバック時 location.href で処理

【jQuery Ajaxでファイルを送りたい! - かもメモ】
https://chaika.hatenablog.com/entry/2014/04/12/001012

【[JavaScript] Ajaxでファイルをアップロード【jQuery使用】 - Qiita】
https://qiita.com/yasumodev/items/cffb735f46ffd489a4db

投稿2019/02/21 04:35

kei344

総合スコア69407

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問