11.1 <input type="file"> 要素
Webアプリケーションでは、ユーザーにサーバーにファイルをアップロードするよう求めることがよくあるよ。これが役立つのは、ドキュメントや画像、動画、その他のデータをアップロードするときだね。HTML は、<input type="file"> 要素を提供していて、ファイルアップロードのインターフェースを作成するために使えるんだ。ここでは、この要素とその属性、例えば multiple や accept について詳しく見ていこう。
<input type="file"> 要素は、ユーザーがデバイスからファイルを選んでサーバーにアップロードできるようにするインターフェース要素を作成するんだ。これは、HTML フォームのキーパーソンのひとつで、Webアプリにファイルアップロード機能を統合するのに役立つよ。
<input type="file"> 要素の主要な属性
type="file"— この要素がファイル選択用であることを定義する。name— フォームデータをサーバーに送信するときに使われる要素の名前を設定する。multiple— ユーザーが複数のファイルを同時に選択できるようにする。accept— 選択できるファイルのタイプを MIME タイプやファイル拡張子で指定する。
<input type="file"> 要素の使用例
シンプルな例
追加の属性なしのファイルアップロードのための最も簡単な要素例:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">ファイルを選んで:</label>
<input type="file" id="file" name="file">
<button type="submit">アップロード</button>
</form>
11.2 multiple属性
<input type="file"> 要素は、機能を拡張するいくつかの属性をサポートしているんだ。ここでは two つの例を見てみよう: multiple と accept。
multiple 属性は、ユーザーが複数のファイルを選択してアップロードできるようにするんだ。この属性が追加されると、ユーザーはファイル選択ダイアログで複数のファイルを選べるようになるよ。
使用例:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="files">ファイルを選んで:</label>
<input type="file" id="files" name="files" multiple>
<button type="submit">アップロード</button>
</form>
ファイル選択ダイアログで、ユーザーは Ctrl (Mac では Cmd) や Shift を押しながら複数のファイルを選択してアップロードできるんだ。
11.3 accept属性
accept 属性は、ユーザーが選択できるファイルのタイプを制限するんだ。これは、ユーザーが許可されたタイプのファイルのみをアップロードすることを保証するのに便利なんだ（例えば、画像やドキュメントだけ）。
使用例:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">画像を選んで:</label>
<input type="file" id="image" name="image" accept="image/*">
<button type="submit">アップロード</button>
</form>
accept 属性は、選択可能なファイルのタイプを制限する。これは MIME タイプやファイル拡張子で行うことができるよ。上の例では、ユーザーは画像ファイルのみ選択可能なんだ。
accept属性の例示的な値
ファイルタイプによる制限:
accept="image/*": どんな画像でもOKaccept="video/*": どんなビデオファイルでもOKaccept="audio/*": どんな音声ファイルでもOK
ファイル拡張子による制限:
accept=".jpg/.jpeg/.png": JPEGとPNG形式の画像のみaccept=".pdf/.doc/.docx": PDFとWord形式のドキュメントのみ
11.4 クライアント側でのファイル処理
時には、ファイルをサーバーに送信する前にクライアント側で処理する必要があるんだ。例えば、画像のプレビューを表示したり、ファイルサイズを確認したりすることができるんだね。そのためには JavaScript を使うよ。
画像プレビューの例:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">画像を選んで:</label>
<input type="file" id="image" name="image" accept="image/*">
<div id="preview"></div>
<button type="submit">アップロード</button>
</form>
document.getElementById('image').addEventListener('change', function(event) {
const preview = document.getElementById('preview');
preview.innerHTML = '';
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '200px';
preview.appendChild(img);
}
reader.readAsDataURL(file);
}
});
説明
FileReader: クライアント側でファイルの内容を読み込むために使用されるreader.onload: ファイルが完全に読み込まれたときに発生するイベントreader.readAsDataURL(file): ファイルを読み込んで Data URL としてエンコードし、それを<img>タグで表示できるようにするメソッド
GO TO FULL VERSION