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

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

ただいまの
回答率

90.50%

  • JavaScript

    20428questions

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

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

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,426

Hiroooo

score 48

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

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

<div id='body-text' class='body-text' contenteditable=true></div>

<label>
    <i class='fa fa-picture-o' aria-hidden='true'></i>
    <input type='file' name='image' onchange={ inputImage }  hidden>
</label>
inputImage(e) {
    var fileData = e.target.files[0]
    var fileType = fileData.type

    var reader = new FileReader()

    reader.onerror = () => {
        alert('Failed to upload. Please do it again')
    }

    reader.onload = () => {
        var url = reader.result
        var imageArea = document.createElement('div')
        var image = document.createElement('img')
        image.setAttribute('src', url)
        imageArea.appendChild(image)
        var target = document.getElementById('body-text')
        target.appendChild(imageArea)
    }
    reader.readAsDataURL(fileData)
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/02 10:49

    動かないのは特定のブラウザでしょうか。

    キャンセル

  • Hiroooo

    2016/10/02 11:12

    現在chromeで動かない状況で、ご質問を頂いてから他のブラウザでも試してみようと思ったのですが、開発環境についての知識が乏しく、現状どうやって他のブラウザで試すのかわからない状況です。。chromeで動かないのだから動かないのだろうと思っていました。

    個人的には「onchange」で関数を呼び出しているので、2回連続で同じファイルを選択すると変化がなく発火しないのかなと思っているのですが、1度選択して設定したものをどう消すのかわからず、これがわかれば解決するのかもしれないなと思っています。全然違うのかもしれませんが。

    キャンセル

回答 2

+1

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

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

解決方法として思いつくのは、

  1. ボタンを別に用意する
  2. ボタンのクリック時に新規の input type='file' を生成する
  3. それに changeイベントを付ける
  4. 生成時にクリックイベントを発生させる(jQueryで書くと楽)
  5. チェンジイベントで他の input type='file' を消す

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/02 13:19

    ありがとうございます。
    jsfiddleのものは細かい部分を修正いただいたためIEとFirefoxでは動くが、Chromeでは動かないという認識でよろしいでしょうか?

    また、Chrome対策の解決策の道筋も示していただきありがとうございます。
    訳あってjQueryは使わない予定なので結構複雑になってしまいそうですが試してみます。

    いつもご回答いただきありがとうございます!

    キャンセル

  • 2016/10/03 02:24

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

    キャンセル

  • 2016/10/03 09:42

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

    キャンセル

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 13:16 編集

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

    ただ、お忙しい中ご回答いただきありがとうございました!

    キャンセル

  • 2016/10/02 13:53

    質問者さんのコードで「同じ画像を続けて2回選択する」とどういうことになるかは分かりませんが、少なくとも私が紹介したコードでは 1 回目の画像選択で画用が表示されたあと、もう一度同じ画像を選択した場合、同じ画像が表示されています。

    お手数ですが、紹介した記事からリンクを貼ったページ(URL 下記しておきます)で試すことができますので、試してみて「私のコードと結果は変わらない」のかコメントいただけると幸いです。

    http://surferonwww.info/Test/0118-CanvasImageUpload2.aspx

    試してみて、望む結果になるが表示には img を使いたいということであれば、canvas を img に変えればよさそうな気がします。

    キャンセル

  • 2016/10/03 09:48

    ご丁寧にページまで作成いただきましてありがとうございます。

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

    キャンセル

  • 2016/10/03 11:38

    連絡いただきありがとうございました。

    Hiro14 さんのやりたいこと「選択した画像を縦にどんどん並べていく」が理解できていませんでした。自分が紹介したサンプルは、ユーザーが選んだ画像を 1 枚だけ表示するというものなので、目的には合わなかったですね。すみません。

    問題の原因は、先に選んだ画像と同じ画像を選択した場合、ブラウザによって input type='file' 要素の change イベントの発生の有無が違うというところにあるようです。kei344 さんの検証結果によると、

    IE, Chrome: change イベントが発生しない
    Firefox: change イベントが発生する

    ということで、Hiro14 さんが使っている Chrome の場合:同じ画像を選択する ⇒ change イベントが発生しない ⇒ そのイベントにアタッチされたリスナ(inputImage メソッド)は動かない ⇒ 何も起こらない ⇒ 同じ画像を続けては表示できない・・・ということになっているようです。

    でも、kei344 さんが言われるように、「この挙動のほうが普通」だと自分も思います。同じ画像を並べて表示することに何か意味があれば話は別ですが。

    キャンセル

  • 2016/10/03 15:07

    コメントありがとうございます。

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

    キャンセル

  • 2016/10/03 17:05

    横から失礼します。
    To: Hiro14さん
    > 簡単なメディアの記事作成画面を作っていて、そこでは一度選んだ画像を消して、次に他の場所に消した画像と同じものを挿入しようとするという状況

    これであれば、フォームからファイルを得た時点(画像を取得した時点)で他の場所に保存(配列なりなんなり)しておけば、再利用可能ではないでしょうか。どういったUIかにもよるのですが、「画像を選択⇒リストの最後に表示⇒そこからドラッグで編集エリアに追加」といったUIにすれば再利用も可能だし、同じ画像を2回呼び出す必要もありません。

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20428questions

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