【JavaScript】ブラウザ画面にドラッグ＆ドロップされた画像をimg要素で表示する

Tweet

Category JavaScript 2016/04/20

問題

エクスプローラーなどからドラッグ＆ドロップした画像をJavaScriptで取得したいです。

答え

HTML

<div id="target" style="border: solid 5px #ccc; padding:2em; text-align:center;">
	ここに画像ファイルをドロップします。
</div>

<img id="preview">

JavaScript

var target = document.getElementById('target');
target.addEventListener('dragover', function (e) {
	e.preventDefault();
	e.stopPropagation();
	e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
	e.stopPropagation();
	e.preventDefault();
	const reader = new FileReader();
	reader.onload = function (e) {
		document.getElementById('preview').src = e.target.result;
	}
	reader.readAsDataURL(e.dataTransfer.files[0]);
});

DEMO

メモ

JavaScriptをjQueryで書く場合、dropイベントなどを取得するために、e.originalEvent を使う必要がある。

$('target').on("drop", function(_e){
	var e = _e;
	if( _e.originalEvent ){
	    e = _e.originalEvent;
	}
	e.stopPropagation();
	e.preventDefault();

	//以下略