file入力は「ユーザーのPCやスマホから“ファイルそのもの”を受け取るための入り口」
type="file" は、 ユーザーの端末（PC・スマホ）の中から、画像やPDFなどの「ファイルそのもの」を選んで送ってもらうための入力欄 です。
テキスト入力や number入力が「文字や数値」を送るのに対して、 file入力は「ファイルそのもの」をサーバーに渡します。
プロフィール画像のアップロード 履歴書（PDF）のアップロード 添付ファイル付きお問い合わせ CSVインポート
こういう「ファイルを送ってほしい」場面では、必ず type="file" が登場します。
file入力の基本形と「フォーム側の特別なルール」
いちばんシンプルな file入力
<input type="file" name="avatar">
これだけで、 「ファイルを選択」というボタン（ブラウザによって文言は違う）が表示されます。
ユーザーがクリックすると、 OSの「ファイル選択ダイアログ」が開き、 画像やPDFなどを選べます。
選ばれたファイルは、 フォーム送信時に avatar という名前でサーバーに送られます。
ファイルを送るフォームには enctype が必須
file入力をフォームで使うとき、 ここが超重要ポイントです。
<form action="/upload" method="post" enctype="multipart/form-data">
<p>プロフィール画像：</p>
<input type="file" name="avatar">
<button type="submit">アップロード</button>
</form>
enctype="multipart/form-data" を付けないと、 ファイルが正しく送られません。
テキストだけのフォームなら application/x-www-form-urlencoded（デフォルト）でいいのですが、 ファイルを含む場合は「マルチパート」という特別な形式で送る必要があります。
file入力をフォームに入れたら、 必ず <form> に enctype="multipart/form-data" を付ける。 これは“ファイルアップロードフォームの掟”だと思ってください。
accept属性で「選んでほしいファイルの種類」を絞る
画像だけ選ばせたい場合
<input
type="file"
name="avatar"
accept="image/*"
>
accept="image/*" とすると、 ファイル選択ダイアログで「画像ファイル」に絞られます（完全ではないですが、かなり絞れる）。
JPEG（.jpg, .jpeg） PNG（.png） GIF（.gif）
など、画像系の拡張子が対象になります。
PDFだけ選ばせたい場合
<input
type="file"
name="resume"
accept="application/pdf"
>
これで、 PDFファイルに絞ることができます。
複数の種類を許可する
<input
type="file"
name="document"
accept=".pdf,.doc,.docx"
>
拡張子をカンマ区切りで指定すると、 その拡張子のファイルだけ選べるようになります。
accept は「ユーザーにどんなファイルを選んでほしいか」をブラウザに伝えるもの。 完全なバリデーションではないけれど、 “間違った種類を選びにくくする”ための大事なヒントです。
複数ファイルを選べるようにする：multiple属性
1つだけか、複数OKかを決める
デフォルトでは、 file入力は「1つのファイル」しか選べません。
複数選んでほしいときは、multiple を付けます。
<input
type="file"
name="photos"
accept="image/*"
multiple
>
これで、 画像ファイルを複数選べるようになります。
フォーム送信時には、 photos という名前で複数のファイルが送られます（サーバー側の受け取り方は環境によって違う）。
「1枚だけアップロードしてほしいのか、何枚でもいいのか？」 この設計をちゃんと考えて、multiple を付けるかどうか決める。 ここも file入力の重要な設計ポイントです。
JavaScript と file入力：選ばれたファイルを“中身として”扱う
FileList と Fileオブジェクトを理解する
HTML：
<input
type="file"
id="avatar"
name="avatar"
accept="image/*"
>
<button type="button" id="show">選択状態を表示</button>
<p id="result"></p>
JavaScript：
const input = document.querySelector("#avatar");
const button = document.querySelector("#show");
const result = document.querySelector("#result");
button.addEventListener("click", () => {
const files = input.files; // ← FileList オブジェクト
if (!files || files.length === 0) {
result.textContent = "ファイルが選択されていません。";
return;
}
const file = files[0]; // 1つ目のファイル
result.textContent = `選択されたファイル：${file.name}（${file.size} バイト）`;
});
ここでのポイントは、
input.files が「選ばれたファイルの一覧（FileList）」 files[0] が 1 つ目の Fileオブジェクト file.name や file.size でファイル名・サイズを取得できる
ということです。
input.value は、 ブラウザによってはファイルパスっぽい文字列を返しますが、 セキュリティの都合であまり意味のある情報ではありません。
file入力の“本体”は input.files。 FileList と Fileオブジェクトを通して、 「選ばれたファイルの中身」を扱うのが JavaScript 側の基本です。
画像プレビューを表示する定番パターン
FileReader を使って、選んだ画像を画面に表示する
HTML：
<input
type="file"
id="avatar"
name="avatar"
accept="image/*"
>
<div>
<p>プレビュー：</p>
<img id="preview" src="" alt="プレビュー画像" style="max-width: 200px;">
</div>
JavaScript：
const input = document.querySelector("#avatar");
const preview = document.querySelector("#preview");
input.addEventListener("change", () => {
const files = input.files;
if (!files || files.length === 0) {
preview.src = "";
preview.alt = "プレビュー画像";
return;
}
const file = files[0];
if (!file.type.startsWith("image/")) {
preview.src = "";
preview.alt = "画像ファイルを選択してください。";
return;
}
const reader = new FileReader();
reader.addEventListener("load", () => {
preview.src = reader.result; // Base64 データURLが入る
preview.alt = file.name;
});
reader.readAsDataURL(file);
});
ここでの流れは、
ユーザーが画像ファイルを選ぶ change イベントが発生する input.files[0] でファイルを取得する FileReader でファイルを読み込む 読み込んだ結果（データURL）を <img> の src に入れる
というものです。
file入力は「ファイルを選ぶ入り口」であり、 JavaScript は「そのファイルをどう見せるか・どう送るか」を決めるロジック。 画像プレビューは、その典型的な応用例です。
セキュリティと file入力：「ユーザーの端末の中身は直接見えない」
ブラウザは“ユーザーの許可したファイルだけ”を扱う
重要な感覚として、
JavaScript から「ユーザーのPCの中身を勝手に読む」ことはできません。
できるのは、
ユーザーが file入力で選んだファイルだけ そのファイルを input.files 経由で扱うことだけ
です。
つまり、
勝手に「Cドライブの中をスキャンする」 勝手に「写真フォルダの中身を全部送る」
みたいなことは、ブラウザの仕組み上できません。
file入力は「ユーザーが自分で選んだファイルだけ」を Webアプリに渡すための、安全な窓口。 この前提を理解しておくと、安心して扱えます。
file入力を使うか迷ったときの判断基準
「ここは“ユーザーの端末からファイルそのもの”を受け取りたい場面か？」
自分にこう聞いてみてください。
ここで欲しいのは、
文字列や数値ではなく、 画像・PDF・CSVなどの「ファイルそのもの」か？
YES → type="file"
プロフィール画像 履歴書 添付ファイル付きお問い合わせ データインポート用のCSV
こういったものは、 file入力で受け取るのが自然です。
逆に、
URLだけ欲しい テキストとして内容を書いてほしい
という場面では、 file入力ではなく text入力や textarea の方が向いています。
初心者として「file入力」で絶対に掴んでほしいこと
type="file" は、 「ユーザーのPCやスマホから、画像やPDFなどの“ファイルそのもの”を選んで送ってもらうための入力欄」 です。
フォーム側には必ず enctype="multipart/form-data" を付ける accept で「選んでほしいファイルの種類」を絞れる multiple で複数ファイル選択もできる JavaScriptでは input.files（FileList）から Fileオブジェクトを扱う 画像プレビューなど、選んだファイルをその場で見せるUIも作れる ブラウザは「ユーザーが選んだファイルだけ」を扱い、端末の中身を勝手に読むことはできない
あなたが file入力を書くときに、 「これは“ファイルそのもの”を世界に渡す入り口で、 フォームの設定（enctype）と、ファイルの種類・個数の設計がめちゃくちゃ大事なんだよな」 とイメージできていたら、 もう file入力を“ただのファイル選択ボタン”ではなく、 “ユーザーの端末とあなたのアプリをつなぐ、慎重に設計すべきインターフェース”として扱えている状態です。