ウェブサイトやアプリケーションを構築する際、ユーザーから画像やドキュメントを受け取る機能は非常に重要です。
HTMLでこの機能を実現するために最も基本となるのが、input要素のtype属性にfileを指定する方法です。
一見するとシンプルなタグですが、多くの属性を組み合わせることで、ファイルの種類を制限したり、複数選択を許可したりと、高度な制御が可能になります。
本記事では、input type=”file”の基礎知識から、実務で役立つ具体的な属性の使い方、さらにはJavaScriptを用いた応用的な実装方法まで詳しく説明します。
使い勝手の良いファイルアップロード機能を実装するための知識を、体系的に学んでいきましょう。
input type=”file”の基本構造と役割
HTMLでファイル選択ボタンを表示させるには、inputタグを使用します。
基本となる記述は非常に簡潔であり、以下のコードでファイル選択ダイアログを呼び出すことができます。
<!-- 最もシンプルなファイル選択ボタン -->
<input type="file" name="user_file">このコードをブラウザで表示すると、「ファイルを選択」といったテキストが書かれたボタンが表示されます。
ただし、実際にファイルをサーバーへ送信するためには、このタグをform要素で囲む必要があります。
また、ファイルデータを正しく転送するために、formタグには特定の属性を指定しなければなりません。
formタグのenctype属性に注意する
ファイルをアップロードするフォームを作成する場合、enctype属性にmultipart/form-dataを指定することが必須です。
この指定がない場合、ファイルの名前だけが送信され、ファイルの中身（バイナリデータ）が送信されません。
以下のコード例は、ファイルを送信するための標準的な構成です。
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file_upload">アップロードするファイルを選んでください：</label>
<input type="file" id="file_upload" name="my_file">
<button type="submit">送信する</button>
</form>method属性は必ずpostに設定してください。
getメソッドではファイルデータをURLのクエリパラメータとして扱うことができないため、アップロードには適していません。
主要な属性とその役割
input type=”file”には、ユーザーの操作を制限したり、利便性を向上させたりするための属性がいくつか用意されています。
これらの属性を適切に使用することで、システムが受け入れられないファイル形式をあらかじめ除外することが可能になります。
accept属性によるファイル形式の制限
accept属性を使用すると、ユーザーが選択できるファイルの種類を指定できます。
例えば、画像ファイルのみを選択させたい場合は、image/*と記述します。
特定の拡張子のみを許可することも可能で、カンマ区切りで複数の形式を指定できます。
<!-- 画像ファイル全般を許可 -->
<input type="file" accept="image/*">
<!-- PDFファイルのみを許可 -->
<input type="file" accept=".pdf">
<!-- JPEG、PNG、PDFを許可 -->
<input type="file" accept=".jpg, .jpeg, .png, .pdf">accept属性はあくまでユーザーに対する「フィルタリング」であり、厳密なセキュリティチェックではない点に注意してください。
悪意のあるユーザーは属性を無視してファイルを送信できるため、必ずサーバー側での検証も行いましょう。
multiple属性による複数ファイル選択
デフォルトでは、一度に選択できるファイルは1つだけです。
複数のファイルを同時にアップロードさせたい場合は、multiple属性を付与します。
<!-- 複数ファイルの選択を許可 -->
<input type="file" name="photos[]" multiple>multiple属性を追加すると、ユーザーはCtrlキーやShiftキーを押しながら複数のファイルを選択できるようになります。
サーバー側で受け取る際に配列として処理しやすくするため、name属性の末尾に[]を付けるのが一般的な作法です。
capture属性によるカメラの起動（モバイル向け）
スマートフォンなどのモバイル端末において、直接カメラやビデオを起動させたい場合に有効なのがcapture属性です。
この属性はaccept属性と一緒に使用することで、撮影モードを指定できます。
<!-- 前面カメラ（自撮り）を優先して起動 -->
<input type="file" accept="image/*" capture="user">
<!-- 背面カメラを優先して起動 -->
<input type="file" accept="image/*" capture="environment">capture属性を指定することで、既存のアルバムから選ぶのではなく、その場で撮影してアップロードするフローをスムーズに提供できます。
ファイルアップロードに関連する各種属性のまとめ
input type=”file”で使用される主な属性を以下の表にまとめました。
| 属性名 | 役割 | 指定できる値の例 |
|---|---|---|
| accept | 選択できるファイル形式を制限する | .jpg, .png, image/*, .pdf |
| multiple | 複数のファイルを一度に選択できるようにする | （値なし） |
| capture | モバイル端末でカメラ等の入力を直接呼び出す | user, environment |
| required | 送信前にファイルの選択を必須にする | （値なし） |
| webkitdirectory | ファイルではなくディレクトリ（フォルダ）単位で選択する | （値なし） |
特にwebkitdirectoryは非標準の属性ですが、多くのモダンブラウザでサポートされており、フォルダ構造を維持したままアップロードする際に便利です。
CSSによるデザインのカスタマイズ
標準のinput type=”file”は、ブラウザごとにデザインが異なり、かつCSSで直接スタイルを変更することが非常に困難です。
そのため、実務ではinput要素を非表示にし、label要素をボタンとして装飾する手法が一般的に用いられます。
<!-- HTML構造 -->
<div class="file-upload-wrapper">
<label for="custom_file" class="upload-button">
ファイルを選択する
</label>
<input type="file" id="custom_file" style="display:none;">
</div>input要素にdisplay: none;を指定して隠しても、label要素のfor属性とinput要素のid属性が一致していれば、ラベルをクリックした際にファイル選択ダイアログが開きます。
この方法を使えば、ウェブサイトのデザインに合わせた独自のアップロードボタンを作成することが可能です。
JavaScriptでのファイル情報の取得
ユーザーがファイルを選択した際、送信する前にファイル名やファイルサイズを画面に表示したい場合があります。
JavaScriptのFile APIを活用することで、クライアント側でファイル情報を柔軟に取得できます。
// input要素を取得
const fileInput = document.getElementById('file_upload');
// ファイルが選択された時のイベント
fileInput.addEventListener('change', (event) => {
// 選択されたファイルのリストを取得
const files = event.target.files;
if (files.length > 0) {
for (let i = 0; i < files.length; i++) {
const file = files[i];
console.log(`ファイル名: ${file.name}`);
console.log(`サイズ: ${file.size} bytes`);
console.log(`タイプ: ${file.type}`);
}
}
});event.target.filesはFileListオブジェクトを返します。
このオブジェクトから各ファイルのプロパティにアクセスすることで、選択された内容を即座にユーザーへフィードバックできます。
ファイル名: photo.jpg
サイズ: 204800 bytes
タイプ: image/jpeg例えば、ファイルサイズが大きすぎる場合に警告を出したり、許可されていない拡張子をチェックしたりする処理を追加することで、ユーザビリティを高めることができます。
プレビュー機能の実装方法
画像をアップロードする場合、送信前にどのような画像を選んだのかプレビューを表示すると親切です。
これを実現するには、FileReaderオブジェクトを使用します。
const fileInput = document.getElementById('image_upload');
const previewArea = document.getElementById('preview');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
// ファイルが存在し、画像であることを確認
if (file && file.type.startsWith('image/')) {
const reader = new FileReader();
// 読み込み完了時の処理
reader.onload = (e) => {
const img = document.createElement('img');
img.src = e.target.result;
img.style.width = '200px';
previewArea.innerHTML = ''; // 以前のプレビューをクリア
previewArea.appendChild(img);
};
// ファイルをData URLとして読み込む
reader.readAsDataURL(file);
}
});このスクリプトは、選択されたファイルをメモリ上に読み込み、imgタグのsrc属性にセットできる形式に変換します。
これにより、サーバーに送信することなくブラウザ上で画像の内容を確認できます。
セキュリティとユーザビリティの注意点
ファイルアップロード機能は、攻撃者にとっての侵入口になりやすい部分でもあります。
安全なウェブサイトを運営するために、以下の点に必ず配慮してください。
ファイルサイズの制限を設ける
巨大なファイルを無制限に受け入れると、サーバーのストレージや帯域を圧迫し、サービス停止に追い込まれるリスクがあります。
HTMLのinput属性だけではファイルサイズを制限できないため、前述のJavaScriptでのチェックに加えて、サーバー側の設定（PHPのupload_max_filesizeなど）を適切に行う必要があります。
ファイル名のサニタイズ
ユーザーがアップロードするファイル名には、システムを混乱させる特殊文字が含まれている可能性があります。
サーバーで保存する際は、元のファイル名をそのまま使うのではなく、ハッシュ値や日時をベースにした新しいファイル名を生成して保存するのが安全です。
アクセシビリティへの配慮
input要素をCSSで隠して独自のボタンを作る際は、キーボード操作ができるように配慮しなければなりません。
label要素がフォーカスを受け取れるようにするか、あるいは元のinput要素を透明にして重ねるなどの工夫が必要です。
また、スクリーンリーダーを利用するユーザーのために、aria-labelなどの属性で「ファイル選択ボタンであること」を明確に伝えましょう。
まとめ
HTMLのinput type=”file”は、ウェブアプリケーションにおけるデータ収集の要となる要素です。
基本となるform要素のenctype属性の指定を忘れずに行い、accept属性やmultiple属性を使い分けて適切なUIを提供しましょう。
また、デフォルトのボタンデザインに満足できない場合は、label要素を組み合わせたカスタマイズが有効です。
JavaScriptのFile APIを併用すれば、ファイル情報の表示や画像プレビューといった、より高度で親切なユーザー体験を実現できます。
セキュリティ面では、クライアント側のバリデーションだけでなく、必ずサーバー側でのチェックを二重で行うことを心がけてください。
これらの基本と属性をマスターすることで、堅牢で使いやすいファイルアップロード機能を実装できるようになります。