【HTML】ファイルを複数選択してアップロードする方法
お問い合わせフォームで画像やPDFなどファイルを選択してアップロードしてもらう際、<input type="file">タグを使いますが、通常は一つのタグに対して1ファイルしか選択することが出来ません。
しかし、<input type="file">タグにパラメータを追加することで複数ファイルを同時に選択することが出来るようになります。
この記事では<input type="file">タグでファイルを選択する際、複数ファイルを同時に選択する方法をご紹介したいと思います。
ファイルをアップロードする基本形
まずは<input type="file">の基本形を見てみましょう。
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="送信する">
</form>ファイルをアップロードする場合はenctype属性にmultipart/form-dataを設定します。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
この状態だと選択できるファイルは一つだけになっています。
そしてサーバー側のプログラムはこちら。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST')
if (isset($_FILES['files'])) {
$fileName = $_FILES['files']['name'];
$fileTmpName = $_FILES['files']['tmp_name'];
$uploadPath = 'uploads/' . basename($fileName);
if (move_uploaded_file($fileTmpName, $uploadPath)) {
echo "ファイル " . htmlspecialchars($fileName) . " が正常にアップロードされました。";
} else {
echo "ファイル " . htmlspecialchars($fileName) . " のアップロードに失敗しました。";
}
}
}
?>ファイルを複数選択してアップロードする方法
ファイルを複数して選択してアップロードする場合、<input type="file">タグを以下のように書き換えます。
<!-- // 書き換え前 -->
<!--<input type="file" name="file">-->
<!-- // 書き換え後 -->
<input type="file" name="file[]" multiple><input type="file">タグにmultiple属性を追加し、name属性をfile[]と配列形式にすることで、複数ファイルを処理出来るようになります。
<form action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file[]" multiple>
<input type="submit" value="送信する">
</form>実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
見た目は変わりませんが、先ほどの実装サンプルと異なり、こちらの場合はファイルを複数選択することが出来るようになっています。
サーバー側の処理
そして、アップロードされたファイルを処理するためには、サーバー側のプログラムも複数ファイルに対応するようにする必要があります。
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['files'])) {
$fileCount = count($_FILES['files']['name']);
for ($i = 0; $i < $fileCount; $i++) {
$fileName = $_FILES['files']['name'][$i];
$fileTmpName = $_FILES['files']['tmp_name'][$i];
$uploadPath = 'uploads/' . basename($fileName);
if (move_uploaded_file($fileTmpName, $uploadPath)) {
echo "ファイル " . htmlspecialchars($fileName) . " が正常にアップロードされました。";
} else {
echo "ファイル " . htmlspecialchars($fileName) . " のアップロードに失敗しました。";
}
}
}
}
?>これでWebブラウザで複数選択したファイルをサーバー側で全てのファイルをアップロードすることが出来ます。
まとめ
いかがでしたか？
ファイルを複数アップロードすることが出来ればフォームの拡張の幅がぐっと上がりますね。
もちろんセキュリティ対策はしっかりするようにしましょう。
