ドラッグ&ドロップされたファイルの属性を取得するには?
解説
ドラッグ&ドロップされたファイルの情報を取得するには、以下のようにします。HTML5のドラッグ&ドロップはOperaでは未実装です。
// targetはドラッグ&ドロップされる領域、resultは結果を表示する領域
target.ondragover = function(event){
if (event.preventDefault) {
event.preventDefault();
}
}
target.ondrop = function(event){
var f = event.dataTransfer.files[0];
result.innerHTML = "ファイル名:" + f.name + " サイズ:" + f.size + " MIMEタイプ:" + f.type;
if (event.preventDefault) {
event.preventDefault();
}
}
まず、ondragoverイベントハンドラで「event.preventDefault()」メソッドを実行することで、ブラウザの既定のドラッグ時の動作を抑制します。
つぎに、ondropイベントハンドラでも、ブラウザの既定のドロップ時の動作を抑制したうえで、eventオブジェクトのdataTransfer属性のfiles属性を参照します。
このfiles属性にはinput要素の場合と同じで、ドラッグ&ドロップされたファイルの情報を格納したFileオブジェクトの配列が格納されており、複数のファイルのドラッグ&ドロップにも対応しています。
最後に、1番目のファイルの情報を格納したFileオブジェクトの属性からファイル名、サイズ、MIMEタイプを取得しています。
関連項目