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>
実行結果