potisanのプログラミングメモ

趣味のプログラマーがプログラミング関係で気になったことや調べたことをいつでも忘れられるようにメモするブログです。はてなブログ無料版なので記事の上の方はたぶん広告です。記事中にも広告挿入されるみたいです。

JavaScript ファイルのドロップを受け入れる

HTML JavaScript まとめ未登録（管理用）

JavaScriptでファイルのドロップを受け入れるサンプルコードです。特殊オブジェクト（デスクトップの「PC」など）が含まれると何も取得されなくなることに注意してください。

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample Document</title>
<style>
/* 外見を整えるためのスタイル定義です。 */
html {
  padding: 0;
  margin: 0;
}
body {
  padding: 1% 2.5%;
  margin: 0;
}
div {
  margin: 1em 0;
}
#dropzone1 {
  width: 100%;
  height: 10em;
  border: 1px solid gray;
  color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<script>
function dragOverHandler(e)
{
  e.preventDefault();
}

function dropHandler(e)
{
  e.preventDefault();

 // formatterはバイトサイズの整形用です。
  const formatter = new Intl.NumberFormat("ja-JP", {notation: "standard"});

  text1.innerText = Array.from(
    e.dataTransfer.files,
    file => `${file.name}, ${file.type}, ${formatter.format(file.size)}バイト`).join("\n");
}
</script>
</head>
<body>
<h1>サンプル</h1>
<div id="dropzone1" ondragover="dragOverHandler(event);" ondrop="dropHandler(event);">
<span>ここにファイルをドロップしてください。ただし、特殊オブジェクトは非対応です。</span>
</div>
<div>以下にドロップされたファイルの情報（名前, MIMEタイプ, サイズ）が表示されます。</div>
<div id="text1"></div>
</body>
</html>

補足

ドラッグ＆ドロップを受け入れるにはdragoverイベントとdropイベントでe.preventDefaultメソッドの呼び出しが必要です。
e.dataTransfer.filesは単なる配列ではなく特殊なオブジェクトです。コードではArray.fromメソッドで要素を処理しながら配列に変更しています。

参考