STAR-ZERO/gist:2917491

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {

    $('#target').bind('drop', function(e) {
        // ドロップ
        e.preventDefault();
        // ファイル取得
        var files = e.originalEvent.dataTransfer.files;
        for (var i = 0; i< files.length; i++) {
            var f = files[i];

            // FileReader
            var reader = new FileReader();

            if (!f.type.match('image.*')) {
                return;
            }

            reader.file = f;
            reader.onload = function(e) {
                // 画像表示
                var img = $('<img>').attr('src', e.target.result).attr('width', '50px');
                // ファイル名
                var span = $('<span>').text(this.file.name);
                var li = $('<li>').append(img).append(span);
                $('#result').append(li);

            };
            reader.onerror = function(e) {
                alert('read error!');
            };
            // 画像読み込み
            reader.readAsDataURL(f);
        }
    })
    .bind('dragenter', function(e) {
        e.preventDefault();
        return false;
    })
    .bind('dragover', function(e) {
        e.preventDefault();
        return false;
    });

});
</script>
</head>
<body>
<div id="target" draggable="true" style="height:200px; width:200px; background-color:gray;">
ここにドラッグ
</div>
<ul id="result">
</ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {

	$('#target').bind('drop', function(e) {
	// ドロップ
	e.preventDefault();
	// ファイル取得
	var files = e.originalEvent.dataTransfer.files;
	for (var i = 0; i< files.length; i++) {
	var f = files[i];

	// FileReader
	var reader = new FileReader();

	if (!f.type.match('image.*')) {
	return;
	}

	reader.file = f;
	reader.onload = function(e) {
	// 画像表示
	var img = $('<img>').attr('src', e.target.result).attr('width', '50px');
	// ファイル名
	var span = $('<span>').text(this.file.name);
	var li = $('<li>').append(img).append(span);
	$('#result').append(li);

	};
	reader.onerror = function(e) {
	alert('read error!');
	};
	// 画像読み込み
	reader.readAsDataURL(f);
	}
	})
	.bind('dragenter', function(e) {
	e.preventDefault();
	return false;
	})
	.bind('dragover', function(e) {
	e.preventDefault();
	return false;
	});

	});
	</script>
	</head>
	<body>
	<div id="target" draggable="true" style="height:200px; width:200px; background-color:gray;">
	ここにドラッグ
	</div>
	<ul id="result">
	</ul>
	</body>
	</html>