🛸
javascriptでローカルのファイルを読み込む
目的
ファイルの取り扱いについて、ざっくり学んで行こうと思います。
使用する言語はjavascriptです。
環境
OS:Windows 10 Pro
IDE:VSCode バージョン(1.68.1)
docker:Docker version 20.10.16
docker-compose:docker-compose version 1.29.2
docker container:amazon linux 2 + nginx 1.20
ファイルの取り扱いについて
File APIを利用し、ローカルにあるファイルをブラウザで読み込んで表示します。
file_load.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>file練習</p>
<input id="file_load" type="file">
<p id="file_name">file名 = </p>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
// File APIが利用できるか確認
if(window.File){
const elem_file_load = document.getElementById("file_load");
elem_file_load.addEventListener("change", (event) => {
const input_file = event.target.files[0];
const elem_file_name = document.getElementById("file_name");
// file名を取得
elem_file_name.textContent += input_file.name;
});
} else {
alert("File API is not available");
return false;
}
});
</script>
</body>
</html>
ファイルが取得できした。
続いて、ファイルの内容を読み込んで表示します。
file_load.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>file練習</p>
<input id="file_load" type="file">
<p id="file_name">file名 = </p>
<p id="file_data">fileの内容 = </p>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
// File APIが利用できるか確認
if(window.File && window.FileReader){
const elem_file_load = document.getElementById("file_load");
elem_file_load.addEventListener("change", (event) => {
const input_file = event.target.files[0];
// オブジェクト。ユーザーが指定したファイルを非同期で読み取る。
const f_reader = new FileReader();
// ファイル内容の読み込み(f_reader.readAsText)が正常に完了した際、コールされる
f_reader.onload = (event) => {
const elem_file_name = document.getElementById("file_name");
const elem_file_data = document.getElementById("file_data");
// file名を取得
elem_file_name.textContent += input_file.name;
// file内容を取得
elem_file_data.textContent += event.target.result;
};
// ファイル内容読み込み実施
f_reader.readAsText(input_file);
});
} else {
alert("File API is not available");
return false;
}
});
</script>
</body>
</html
ファイル名、ファイル内容が表示できました。
今回は拡張子がtxtのファイルのみ対応します。
また、「fileの内容」も本来は改行が入っていますがブラウザに無視されています。
ちゃんと改行されるようにしてみましょう。
file_load.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>file練習</p>
<input id="file_load" type="file">
<p id="file_name">file名 = </p>
<p id="file_data">fileの内容 ↓↓↓↓↓↓↓↓↓ </p>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
// File APIが利用できるか確認
if(window.File && window.FileReader){
const elem_file_load = document.getElementById("file_load");
elem_file_load.addEventListener("change", (event) => {
const input_file = event.target.files[0];
if(input_file.name.match('.txt$')) {
// オブジェクト。ユーザーが指定したファイルを非同期で読み取る。
const f_reader = new FileReader();
// ファイル内容の読み込み(f_reader.readAsText)が正常に完了した際、コールされる
f_reader.onload = (event) => {
const elem_file_name = document.getElementById("file_name");
const elem_file_data = document.getElementById("file_data");
// file名を取得
elem_file_name.textContent += input_file.name;
// file内容を取得
elem_file_data.innerHTML += event.target.result.replace(/\n/g,"<br>");
};
// ファイル内容読み込み実施
f_reader.readAsText(input_file);
} else {
alert("Only txt files are available");
return false;
}
});
} else {
alert("File API is not available");
return false;
}
});
</script>
</body>
</html>
拡張子がtxt以外のファイルが選択された場合はアラートを出力します。
改行もされ、本来のファイル内容になりました。
File APIはユーザーのローカルファイルを処理出来る便利なAPIです。
ですが、間違った使い方ををすればユーザーの大事なデジタルアセットを
奪うこともできる可能性があります。
ありがとうございます。
ご意見、ご批判頂ければ幸いです。
Discussion