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

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

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

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

jQuery

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

Q&A

解決済

1回答

1471閲覧

フォームから画像アップロード時のプレビュー表示で複数INPUTする場合

creative_09

総合スコア80

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/06/25 15:05

画像アップロードフォームからアップロードした画像のプレビューを表示させています。
画像inputの数すべてに対応させたいので
質問1.
クリックした要素#file_xxxを取得して#file_imgと入れ替えたい
file_img部分がクリックしたIDとなるように記述するにはどうすればいいのでしょうか?

質問2.
画像ファイル以外はプレビュー表示しないように
file.type.indexOf('image') < 0
などを使用してプレビューを表示しないようにするにはどのように記述するのでしょうか?

<script> $(document).on("change", "#file_img", function (e) { var reader; if (e.target.files.length) { reader = new FileReader(); // 画像ファイル以外は処理停止 reader.onload = function (e) { var userThumbnail; userThumbnail = document.getElementById('thumbnail'); $("#userImgPreview").addClass("is-active"); userThumbnail.setAttribute('src', e.target.result); }; return reader.readAsDataURL(e.target.files[0]); } }); </script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

質問1.
クリックした要素#file_xxxを取得して#file_imgと入れ替えたい
file_img部分がクリックしたIDとなるように記述するにはどうすればいいのでしょうか?

「idが"file_"から始まるINPUT要素」という意味のセレクタを使ってください。
以下のようなコードになります。

javascript

1$("INPUT[id=^'file_']").on("click", function(e) { 2 console.log(e.target.id + " がクリックされました。"); 3});

質問2.
画像ファイル以外はプレビュー表示しないように
file.type.indexOf('image') < 0
などを使用してプレビューを表示しないようにするにはどのように記述するのでしょうか?

以下のような記述になります。

javascript

1$("INPUT[id^='file_']").on("change", function(e) { 2 var file = e.target.files[0]; 3 if(file.type.indexOf('image') < 0){ 4 alert("画像ファイルを指定してください。"); 5 return false; 6 } 7 8 // プレビュー表示処理 9});

投稿2020/06/25 16:59

ku__ra__ge

総合スコア4524

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

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

creative_09

2020/06/25 17:21

ありがとうございます。 すごくいい感じでシンプルに再現できました。 やりたいことと今後にも活かせそうな良さげなやり方をありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問