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

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

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

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

Q&A

2回答

3205閲覧

Javascriptによる画像のプレビュー表示について

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2016/10/02 01:15

現在記事作成画面を作成していて、画像をローカルから選択しそれがすぐにプレビューとしてみれるようなものを作っています。
「同じ画像を続けて2回選択する」という特殊なケースを除いてはうまく動作するのですが、この唯一のケースにおいては何も起きないという状況に陥ってしまします。

現在のコードは以下に添付してある通りです。
どのように修正すれば、これが解決されるか、教えていただきたいです。

HTML

1<div id='body-text' class='body-text' contenteditable=true></div> 2 3<label> 4 <i class='fa fa-picture-o' aria-hidden='true'></i> 5 <input type='file' name='image' onchange={ inputImage } hidden> 6</label>

Javascript

1inputImage(e) { 2 var fileData = e.target.files[0] 3 var fileType = fileData.type 4 5 var reader = new FileReader() 6 7 reader.onerror = () => { 8 alert('Failed to upload. Please do it again') 9 } 10 11 reader.onload = () => { 12 var url = reader.result 13 var imageArea = document.createElement('div') 14 var image = document.createElement('img') 15 image.setAttribute('src', url) 16 imageArea.appendChild(image) 17 var target = document.getElementById('body-text') 18 target.appendChild(imageArea) 19 } 20 reader.readAsDataURL(fileData) 21}

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

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

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

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

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

kei344

2016/10/02 01:49

動かないのは特定のブラウザでしょうか。
退会済みユーザー

退会済みユーザー

2016/10/02 02:12

現在chromeで動かない状況で、ご質問を頂いてから他のブラウザでも試してみようと思ったのですが、開発環境についての知識が乏しく、現状どうやって他のブラウザで試すのかわからない状況です。。chromeで動かないのだから動かないのだろうと思っていました。 個人的には「onchange」で関数を呼び出しているので、2回連続で同じファイルを選択すると変化がなく発火しないのかなと思っているのですが、1度選択して設定したものをどう消すのかわからず、これがわかれば解決するのかもしれないなと思っています。全然違うのかもしれませんが。
guest

回答2

0

動くサンプル:https://jsfiddle.net/hnomvgue/4/

↑ とりあえず今の書き方ではIEに対応していなかったのでしてあります。
手元の Firefoxは同じ画像でも changeイベントを発生させました。IE/Chromeはしませんでした(この挙動のほうが普通な気もする)。

解決方法として思いつくのは、
0. ボタンを別に用意する
0. ボタンのクリック時に新規の input type='file' を生成する
0. それに changeイベントを付ける
0. 生成時にクリックイベントを発生させる(jQueryで書くと楽)
0. チェンジイベントで他の input type='file' を消す

こういう感じでしょうか。出来るかどうかはちょっとわかりませんが、自分で試すならこれはやってみると思います。

投稿2016/10/02 02:28

kei344

総合スコア69366

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

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

退会済みユーザー

退会済みユーザー

2016/10/02 04:19

ありがとうございます。 jsfiddleのものは細かい部分を修正いただいたためIEとFirefoxでは動くが、Chromeでは動かないという認識でよろしいでしょうか? また、Chrome対策の解決策の道筋も示していただきありがとうございます。 訳あってjQueryは使わない予定なので結構複雑になってしまいそうですが試してみます。 いつもご回答いただきありがとうございます!
kei344

2016/10/02 17:24

> IEとFirefoxでは動くが、Chromeでは動かない 同じ画像で2回目の changeイベントが発生するのはFirefoxだけですが、修正によってIE11で動くようにはなっています。
退会済みユーザー

退会済みユーザー

2016/10/03 00:42

わかりました。 ありがとうございます。
guest

0

画像をローカルから選択しそれがすぐにプレビューとしてみれる

質問者さんのコードを読んで何故うまく行かないかを解析する元気が今はなくてすみませんが、代わりに(と言っては何ですが)このようにすればできると言う例を紹介します。

canvas の画像をアップロード
http://surferonwww.info/BlogEngine/post/2015/07/02/upload-image-drawn-on-html5-canvas.aspx

クライアントの PC にある画像を HTML5 の File API を利用して取得し、それを指定のサイズに縮小して HTML5 の canvas に描画し、canvas に描画された画像を jQuery.Ajax を使って Web サーバーにアップするというサンプルです。

実際に動かして試すこともできるので、よろしければやってみてください。

投稿2016/10/02 01:30

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2016/10/02 04:16 編集

ありがとうございます。 canvasを使ってもプレビューを表示できるということは勉強になりましたが、こちらでは私のコードと結果は変わらないかと思います。。 普通にアップロードした画像をプレビューすることはできているので。 ただ、お忙しい中ご回答いただきありがとうございました!
退会済みユーザー

退会済みユーザー

2016/10/02 04:53

質問者さんのコードで「同じ画像を続けて2回選択する」とどういうことになるかは分かりませんが、少なくとも私が紹介したコードでは 1 回目の画像選択で画用が表示されたあと、もう一度同じ画像を選択した場合、同じ画像が表示されています。 お手数ですが、紹介した記事からリンクを貼ったページ(URL 下記しておきます)で試すことができますので、試してみて「私のコードと結果は変わらない」のかコメントいただけると幸いです。 http://surferonwww.info/Test/0118-CanvasImageUpload2.aspx 試してみて、望む結果になるが表示には img を使いたいということであれば、canvas を img に変えればよさそうな気がします。
退会済みユーザー

退会済みユーザー

2016/10/03 00:48

ご丁寧にページまで作成いただきましてありがとうございます。 私の質問の仕方が悪く申し訳ないのですが、私のやりたいことは画像のアップロードはまだせずに、選択した画像を縦にどんどん並べていくというようなことです。 もしかしたら私のブラウザの問題かもしれませんが、頂いたページではそういったことはできませんでした。
退会済みユーザー

退会済みユーザー

2016/10/03 02:38

連絡いただきありがとうございました。 Hiro14 さんのやりたいこと「選択した画像を縦にどんどん並べていく」が理解できていませんでした。自分が紹介したサンプルは、ユーザーが選んだ画像を 1 枚だけ表示するというものなので、目的には合わなかったですね。すみません。 問題の原因は、先に選んだ画像と同じ画像を選択した場合、ブラウザによって input type='file' 要素の change イベントの発生の有無が違うというところにあるようです。kei344 さんの検証結果によると、 IE, Chrome: change イベントが発生しない Firefox: change イベントが発生する ということで、Hiro14 さんが使っている Chrome の場合:同じ画像を選択する ⇒ change イベントが発生しない ⇒ そのイベントにアタッチされたリスナ(inputImage メソッド)は動かない ⇒ 何も起こらない ⇒ 同じ画像を続けては表示できない・・・ということになっているようです。 でも、kei344 さんが言われるように、「この挙動のほうが普通」だと自分も思います。同じ画像を並べて表示することに何か意味があれば話は別ですが。
退会済みユーザー

退会済みユーザー

2016/10/03 06:07

コメントありがとうございます。 やはり現状の挙動が普通なのですね。勉強を始めたばかりでそのことも知りませんでした。 確かに今回私が挙げている例は特殊ではありますが、現在contenteditableなdivを使って簡単なメディアの記事作成画面を作っていて、そこでは一度選んだ画像を消して、次に他の場所に消した画像と同じものを挿入しようとするという状況もあり得ると思い、今回のような質問をさせていただきました。
kei344

2016/10/03 08:05

横から失礼します。 To: Hiro14さん > 簡単なメディアの記事作成画面を作っていて、そこでは一度選んだ画像を消して、次に他の場所に消した画像と同じものを挿入しようとするという状況 これであれば、フォームからファイルを得た時点(画像を取得した時点)で他の場所に保存(配列なりなんなり)しておけば、再利用可能ではないでしょうか。どういったUIかにもよるのですが、「画像を選択⇒リストの最後に表示⇒そこからドラッグで編集エリアに追加」といったUIにすれば再利用も可能だし、同じ画像を2回呼び出す必要もありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問