input[type=file] の扱い — const f = input.files[0]
ブラウザでユーザーにファイルを選んでもらうときに使うのが <input type="file">。選ばれたファイルは input.files という FileList に入ります。その中の最初のファイルを取り出すのが input.files[0] です。
基本のコード例
<input type="file" id="fileInput">
<script>
const input = document.getElementById("fileInput");
input.addEventListener("change", () => {
const f = input.files[0]; // 最初に選ばれたファイル
if (!f) return; // ファイルが選ばれていない場合は終了
console.log("ファイル名:", f.name);
console.log("サイズ:", f.size, "bytes");
console.log("種類:", f.type);
});
</script>
filesプロパティ: 選択されたファイルのリスト（複数選択可）。files[0]: 最初のファイル。単一選択ならこれだけで十分。- File オブジェクト:
name（ファイル名）、size（バイト数）、type（MIMEタイプ）などの情報を持つ。
よく使うテンプレート集
テキストファイルを読み込んで表示
<input type="file" id="txtInput" accept=".txt">
<pre id="output"></pre>
<script>
const input = document.getElementById("txtInput");
const output = document.getElementById("output");
input.addEventListener("change", () => {
const f = input.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = (e) => {
output.textContent = e.target.result; // ファイル内容を表示
};
reader.readAsText(f, "utf-8");
});
</script>
- ラベル:
accept=".txt"で拡張子を制限。FileReaderで内容を読み込む。
画像ファイルを選んでプレビュー
<input type="file" id="imgInput" accept="image/*">
<img id="preview" style="max-width:200px">
<script>
const input = document.getElementById("imgInput");
const preview = document.getElementById("preview");
input.addEventListener("change", () => {
const f = input.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = (e) => {
preview.src = e.target.result; // DataURLをimgに設定
};
reader.readAsDataURL(f);
});
</script>
- ラベル:
accept="image/*"で画像限定。選んだ画像を即プレビューできる。
複数ファイルを選んで一覧表示
<input type="file" id="multiInput" multiple>
<ul id="list"></ul>
<script>
const input = document.getElementById("multiInput");
const list = document.getElementById("list");
input.addEventListener("change", () => {
list.innerHTML = "";
for (const f of input.files) {
const li = document.createElement("li");
li.textContent = `${f.name} (${f.size} bytes)`;
list.appendChild(li);
}
});
</script>
- ラベル:
multiple属性で複数選択可能。for...ofで FileList をループ。
実務でのコツ
- セキュリティ: JavaScript はユーザーが選んだファイルしか扱えない。勝手にPC内のファイルを読むことはできない。
- accept 属性: ファイル種類を制限できる（例:
accept="image/*,.pdf"）。ユーザー体験が向上。 - サイズチェック: 大きすぎるファイルは処理前に
f.sizeでチェックして警告。 - FileReader の使い分け:
- テキスト →
readAsText - 画像プレビュー →
readAsDataURL - バイナリ処理 →
readAsArrayBuffer
- テキスト →
- 複数ファイル:
input.filesは配列風のオブジェクト。files[0]は最初のファイル、for...ofで全部扱える。
ありがちなハマりポイントと対策
- ファイルが選ばれていない:
- 対策:
if (!f) return;を必ず入れる。
- 対策:
- 文字化け:
- 対策:
readAsText(f, "utf-8")のようにエンコーディングを指定。
- 対策:
- 画像が表示されない:
- 対策:
readAsDataURLを使う。テキスト読み込みでは<img>に表示できない。
- 対策:
練習問題（CSVファイルを読み込んで表に表示）
<input type="file" id="csvInput" accept=".csv">
<table id="table" border="1"></table>
<script>
const input = document.getElementById("csvInput");
const table = document.getElementById("table");
input.addEventListener("change", () => {
const f = input.files[0];
if (!f) return;
const reader = new FileReader();
reader.onload = (e) => {
const lines = e.target.result.split("\n");
table.innerHTML = "";
lines.forEach(line => {
const tr = document.createElement("tr");
line.split(",").forEach(cell => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
};
reader.readAsText(f, "utf-8");
});
</script>
- 効果: CSVファイルを読み込んで表形式で表示できます。
直感的な指針
input.files[0]= ユーザーが選んだ最初のファイル。- FileReaderで内容を読み込む／画像ならDataURLでプレビュー。
- 複数ファイルは
for...ofで回す。 - セキュリティ上「選ばれたファイルだけ」扱えることを理解しておく。