やりたいこと
Javascriptでローカルに保存されているテキストファイルを読み込みます。
ドラッグアンドドロップでの読み込みは以下を参照。
ファイルシステム APIによる読み込み
以下のhtmlで表示される”text読込”ボタンをクリックすることで、ファイルセレクタからファイルを選択、読み込みをすることができます。
読み込まれたデータはtextに格納されます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>text読込</title>
</head>
<body>
<input type=button id="load" value="text読込">
<script>
async function loadText() {
const opt = {
types: [
{
accept: { "text/plain": [".txt"] }
}
]
};
const handle = await window.showOpenFilePicker(opt);
if (handle[0] != undefined) {
const file = await handle[0].getFile();
const text = await file.text();
console.log(text);
}
}
document.getElementById("load").onclick = loadText;
</script>
</body>
</html>以下のOptは読み込みのオプションです。この例ではテキストファイルを対象としているため”text/plain”: [“.txt”] を設定しています。一般的なMIME Typeは以下のページを参照してください。
const opt = {
types: [
{
accept: { "text/plain": [".txt"] }
}
]
};以下の行でファイルセレクタを表示します。
showOpenFilePickerはクリックなどのユーザオペレーションの直後に呼び出さされる必要があります。たとえばクリック後にshowOpenFilePickerを呼ぶ前に重い処理を行ったり、デバッグで止めると以下のようなエラーが表示され失敗します。（クリックなどなしでshowOpenFilePickerもしくはloadTextを直接に呼ぶこともできません）
Uncaught (in promise) DOMException: Failed to execute ‘showOpenFilePicker’ on ‘Window’: Must be handling a user gesture to show a file picker.
at HTMLInputElement.loadText
const handle = await window.showOpenFilePicker(opt);以下のコードでファイルの中を読み込んでいます。text 変数にファイルの中身がString形式で保存されます。
今回の例ではファイルは一つしか選択できませんがhandleは配列です。
今回の例ではファイルの中身がText固定なのでfile.text()で読み込んでいます。バイナリはfile.arrayBuffer();で読み込みます。
const handle = await window.showOpenFilePicker(opt);
if (handle[0] != undefined) {
const file = await handle[0].getFile();
const text = await file.text();
console.log(text);
}結果
ローカルに保存されているテキストファイルをファイルセレクタを用いて読み込むことができました。
コメント