| 開発環境 |
メモ帳 |
| 実行環境 |
Internet Explorer 11 |
参考
filedrop1.html
<!doctype html>
<head>
<title>filedrop1</title>
<script>
document.getElementById("drop").addEventListener("drop", onDrop, false);
function onDrop(event)
{
var files = event.dataTransfer.files;
var disp = document.getElementById("disp");
disp.innerHTML = "";
for (var i = 0; i < files.length; i++) {
var f = files[i];
disp.innerHTML += "name=[" + f.name + "] type=[" + f.type +
"] size=[" + Math.ceil(f.size / 1024) + " KB]<br>";
}
event.preventDefault();
}
function onDragOver(event)
{
event.preventDefault();
}
</script>
</head>
<body>
<p>drag&dropで1つから複数のファイルのプロパティを取得します。</p>
<div id="drop" style="width:600px; height:150px; padding:10px; border:3px solid"
ondragover="onDragOver(event)" ondrop="onDrop(event)">
ここにドロップしたファイルのプロパティを読み込みます。
</div>
<p>ファイルプロパティ表示</p>
<div id="disp"></div>
</body>
filedrop2.html
<!doctype html>
<head>
<title>filedrop2</title>
<script>
document.getElementById("drop").addEventListener("drop", onDrop, false);
function onDrop(event)
{
var files = event.dataTransfer.files;
var disp = document.getElementById("disp");
disp.innerHTML = "";
for (var i = 0; i < files.length; i++) {
var f = files[i];
if (!f.type.match("image.*")) {
continue;
}
var reader = new FileReader();
reader.onload = function(evt) {
var li = document.createElement("li");
var img = document.createElement("img");
img.src = evt.target.result;
li.appendChild(img);
li.innerHTML += "<br>";
disp.appendChild(li);
}
reader.readAsDataURL(f);
}
event.preventDefault();
}
function onDragOver(event)
{
event.preventDefault();
}
</script>
</head>
<body>
<p>
画像ファイルを選択すると、そのファイルの中身が表示されます。<br>
drag&dropで1つから複数のファイルの内容を取得します。
</p>
<div id="drop" style="width:600px; height:150px; padding:10px; border:3px solid"
ondragover="onDragOver(event)" ondrop="onDrop(event)">
ここにドロップしたファイルの内容を表示します。
</div>
<div id="disp"></div>
</body>
最終更新：2014年09月08日 16:28
