Help us understand the problem. What is going on with this article?

HTML5でファイルをドラッグして読み込むやつ

More than 1 year has passed since last update.

(2018年追記: 自分で必要になって見返してみて、古い記事だけどまだ内容は大丈夫でした。)

サンプル

こんなん:
3.png

ブラウザーでファイルを開かないようにする

  • 受け付けたい要素のdragoverイベントとdropイベントを監視する。
  • それぞれでevent.preventDefault()する。

ファイルをドラッグしてきたら見た目を変える

  • 要素のクラスをon/offする場合。
  • dragoverでonにする。
  • dragleavedropでoffにする。

ドロップされたファイルの情報を取得する

  • dropイベントのevent.dataTransfer.filesにファイル情報が入る。
  • 形式はFileオブジェクトの配列。
  • Fileオブジェクト:
    • name
    • size
    • type … (ex: "image/png")

ドロップされたものが画像であるか判別する

  • Fileオブジェクトのtypeを確認する。
  • type.indexOf('image/')===0なら画像。

画像だったら表示する

  • FileオブジェクトからFileReaderオブジェクトのreadAsDataURL()メソッドを使って読み込む。
  • 読み込み成功するとloadイベントが発火し、そのevent.target.resultに画像のData-URIが格納されている。

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away