1. 導入
Webアプリケーション開発において、ファイルアップロード機能は頻出する要件です。特に「ユーザーが任意の数だけファイルを送信したい」というケースでは、標準的なinputタグ一つだけでは不十分です。複雑なライブラリを導入するほどではないが、ユーザーの利便性を高めたいという場面において、jQueryを用いた入力欄の動的追加は、軽量かつ実装コストの低い非常に有効な解決策となります。
2. 基礎知識
ファイルアップロードにおいて重要なのが、HTMLフォームの属性指定です。フォームタグに「enctype=”multipart/form-data”」を指定し、かつinputタグのname属性を「uploadfile[]」のように配列形式にすることで、PHP側で「$_FILES」スーパーグローバル変数を通じてファイルを配列として受け取ることができます。今回の手法では、jQueryを使用してこのinput要素をDOM操作によって動的に追加していくことで、ユーザーが直感的に複数ファイルを指定できるUIを実現します。
3. 実装/解決策
実装の肝は「最後のinput要素が変更されたとき、その中身が空でなければ新しい要素を追加する」というロジックです。jQueryのchangeイベントを監視し、現在のリストの最後尾に新しい「li」要素と「input」要素を動的に追記します。これにより、ユーザーはファイルを一つ選択するたびに次の入力欄が出現するため、アップロードしたいファイル数に合わせてスムーズに入力操作を行えます。
4. サンプルプログラム
以下は、動的に入力欄を追加するフロントエンド部分と、受け取ったファイルを処理するサーバーサイド（PHP）の最小構成例です。
フロントエンド (index.html)
バックエンド (upload.php)
$name) {
// エラーチェック（UPLOAD_ERR_OK: 0）
if ($_FILES[‘uploadfile’][‘error’][$key] === UPLOAD_ERR_OK) {
$tmpPath = $_FILES[‘uploadfile’][‘tmp_name’][$key];
$destPath = ‘./uploads/’ . basename($name);
// ファイルの移動
move_uploaded_file($tmpPath, $destPath);
echo “アップロード成功: ” . htmlspecialchars($name) . “
“;
}
}
}
?>
5. 応用・注意点
実務でこの機能を実装する際は、以下の点に注意してください。
セキュリティ対策：アップロードされるファイルの拡張子やMIMEタイプを厳格にチェックしてください。画像ファイルのみを許可する場合でも、サーバーサイドでのバリデーションは必須です。
上限設定：php.iniの「upload_max_filesize」や「post_max_size」の上限を超えないよう注意が必要です。また、一度に大量のファイルが送信されるとサーバー負荷が高まるため、必要に応じてJavaScript側で追加可能な最大数（上限カウント）を設けるのが賢明です。
UXの向上：入力しすぎた場合に「削除ボタン」を設置して、誤って追加した要素を取り消せるようにすると、よりユーザーフレンドリーなフォームになります。