http://qiita.com/ginpei/items/5cebb14e210fc0770e94
- 受け付けたい要素の
dragover
イベントとdrop
イベントを監視する。 - それぞれで
event.preventDefault()
する。
- 要素のクラスをon/offする場合
dragover
でonにするdragleave
とdrop
で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が格納されている。