やりたいこと
Javascriptでローカルに保存されているテキストファイルをドラッグアンドドロップ読み込みます。
ファイルセレクタで読み込む場合は以下のページを参照。
ファイルシステム APIによる読み込み
以下のhtmlで表示される500×500の領域にファイルをドラッグアンドドロップすることで、読み込みをすることができます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>text読込</title>
</head>
<body>
<div id="droparea" style="border:solid;width:500px;height:500px"></div>
<script>
document.getElementById("droparea").addEventListener("dragover", () => {
event.preventDefault();
});
document.getElementById("droparea").addEventListener("drop", loadText);
async function loadText(event) {
event.preventDefault();
const items = event.dataTransfer.items;
if (items[0].kind == "file") {
const handle = await items[0].getAsFileSystemHandle();
const file = await handle.getFile();
if (file.type != "text/plain") return;
const text = await file.text();
console.log(text);
}
};
</script>
</body>
</html>以下のコードでドラッグ中とドラッグ時の操作を定義しています。
dragoverがドラッグ中、dropがドロップ時のイベントです。
dragover、dropイベントの中でevent.preventDefault();を呼ぶ必要があります。呼ばないとファイルドロップ時にページ遷移が起きます。（drop時はloadText内で呼んでいます）
document.getElementById("droparea").addEventListener("dragover", () => {
event.preventDefault();
});
document.getElementById("droparea").addEventListener("drop", loadText);以下のコードがドロップ時に呼び出されます。
(items[0].kind == “file”)にてドロップされたアイテムがファイルで、(file.type != “text/plain”)にてTextファイルであることを確認して、const text = await file.text();でファイルの中身をテキストファイルとして読み込んでいます。text 変数にファイルの中身がString形式で保存されます。
async function loadText(event) {
event.preventDefault();
const items = event.dataTransfer.items;
if (items[0].kind == "file") {
const handle = await items[0].getAsFileSystemHandle();
const file = await handle.getFile();
if (file.type != "text/plain") return;
const text = await file.text();
console.log(text);
}
};結果
ローカルに保存されているテキストファイルをドラッグアンドドロップを用いて読み込むことができました。
コメント