ドラッグ＆ドロップでファイルを受け取るコードを紹介します。
プログラム
コード
HTMLファイルを作成し、下記のコードを記述します。
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var output = [];
for (var i = 0; i < files.length; i++) {
document.getElementById('output').innerHTML += files[i].name + '(' + files[i].size + ') '
+ files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() + ' - ' + files[i].type + '<br/>';
}
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function PageLoad(evt) {
var dropFrame = document.getElementById('DropFrame');
dropFrame.addEventListener('dragover', handleDragOver, false);
dropFrame.addEventListener('drop', handleFileSelect, false);
}
</script>
</head>
<body onload="PageLoad();">
<div id="DropFrame" style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。</div>
<div id="output"></div>
</body>
</html>
解説
ページ表示後、onloadイベントのPageLoad()関数が実行されます。
document.getElementById() を呼び出し、ドラッグ＆ドロップを受け入れる領域の要素を取得します。今回は'DropFrame'IDのDivタグ部分をドラッグ＆ドロップを受け入れる領域とします。取得された要素のaddEventListener()メソッドを呼び出し、'dragover'と'drop'イベントを追加します。上記のコードでは、'dragover'イベントが発生した場合は、handleDragOver()関数を実行し、'drop'イベントが発生した場合は、handleFileSelect()関数を実行します。
DrawOverでは下記コードを実行します。
stopPropagation,preventDefault で既存の動作をキャンセルします。また、dataTransfer.dropEffect プロパティに結果の種類を指定します。
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
Dropイベントで実行されるコードは以下になります。イベントの第一引数(下記コードではevt)のdataTransfer.filesにドロップされたファイルの一覧が格納されています。ファイルの取得はファイル選択ボックスと同様に配列の要素にアクセスし、ファイルオブジェクトを取得します。nameプロパティにファイル名、sizeプロパティにファイルサイズ、lastModifiedDateに更新日時が格納されています。
取得した値をid=outpudのタグの領域に出力します。
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var output = [];
for (var i = 0; i < files.length; i++) {
document.getElementById('output').innerHTML += files[i].name + '(' + files[i].size + ') '
+ files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() + ' - ' + files[i].type + '<br/>';
}
}
実行結果
プロジェクトを実行し、HTMLファイルを開きます。下図の画面が表示されます。
水色の[ここにファイルをドロップします。]の領域にエクスプローラからファイルをドラッグ＆ドロップします。ファイルをドロップすると、ファイル名、ファイルサイズ、最終更新日時、MIMEタイプが表示されます。
別のファイルをドロップすると表示も変わります。
複数ファイルを選択して、まとめてドロップすると、ドロップした複数ファイル分の情報が表示されます。
補足
タグに"ondragover" と "ondrop" 属性を記述しaddEventListener()を利用しない記述方法もあります。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
function execDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;
var output = [];
for (var i = 0; i < files.length; i++) {
document.getElementById('output').innerHTML += files[i].name + '(' + files[i].size + ') '
+ files[i].lastModifiedDate.toLocaleDateString() + files[i].lastModifiedDate.toLocaleTimeString() + ' - ' + files[i].type + '<br/>';
}
}
</script></head>
<body>
<div id="DropFrame" ondragover="handleDragOver(event);" ondrop="execDrop(event);"
style="background-color:#b8deff;border:solid 1px #3470ff; width:360px; height:120px;">ここにファイルをドロップします。</div>
<div id="output"></div>
</body>
</html>
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2020-04-06
作成日: 2015-06-26
