20140214【JS】ドロップされたファイルの名前を出力する

お題

ドロップされたファイルの名前を出力する

プログラム概要

ファイルがドロップされたらファイルの名前を出力する

ソース


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hoge</title>
</head>
<body>
<div id="div2" style="border: 1px solid gray; height: 100px;"></div>

<script>
var target = document.getElementById("div2");
target.addEventListener('drop', handleDrop);
target.addEventListener('dragover', handleDragOver);

function handleDragOver(e){
    e.preventDefault();
}

function handleDrop(e){
	for (var i = 0; i < e.dataTransfer.files.length; i++){
		alert('File Name: ' + e.dataTransfer.files[i].name);
	}
	e.preventDefault();
}
</script>

</body>
</html>

実行結果

f:id:mocomei:20140214215420p:plain