• 基本的なファイルアップロードフォーム
• 複数ファイルのアップロード
• 特定のファイルタイプを制限する
• JavaScriptを使った拡張機能
• ファイルアップロードのセキュリティ対策

基本的なファイルアップロードフォーム

HTMLでファイルアップロードを行うには、<input>タグのtype属性をfileに設定します。

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="file">ファイルを選択:</label>
    <input type="file" id="file" name="file">
    <input type="submit" value="アップロード">
</form>

複数ファイルのアップロード

複数のファイルをアップロードできるようにするには、multiple属性を追加します。

<form action="upload.php" method="post" enctype="multipart/form-data">
    <label for="files">ファイルを選択:</label>
    <input type="file" id="files" name="files[]" multiple>
    <input type="submit" value="アップロード">
</form>

特定のファイルタイプを制限する

accept属性を使うことで、許可するファイルの種類を制限できます。

<input type="file" name="image" accept="image/png, image/jpeg">

また、特定の種類のファイル（例：PDF）のみ許可する場合：

<input type="file" name="document" accept=".pdf">

JavaScriptを使った拡張機能

JavaScriptを使って、選択されたファイル名を表示することができます。

<form>
    <input type="file" id="fileInput">
    <p id="fileName">選択されたファイル: なし</p>
</form>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    document.getElementById('fileName').textContent = file ? "選択されたファイル: " + file.name : "選択されたファイル: なし";
});
</script>

ファイルアップロードのセキュリティ対策

ファイルアップロードはセキュリティ上のリスクが伴います。以下の対策を考慮しましょう。

• アップロードされたファイルの拡張子とMIMEタイプをサーバー側でチェックする
• 適切なファイルサイズ制限を設ける
• ユーザーがアップロードしたファイルの保存場所を制限する
• アップロードされたファイルを適切にエスケープし、不正なスクリプトの実行を防ぐ

PHPを使って安全にファイルをアップロードする例：

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["file"])) {
    $allowedTypes = ["image/png", "image/jpeg", "application/pdf"];
    $fileType = mime_content_type($_FILES["file"]["tmp_name"]);

    if (in_array($fileType, $allowedTypes)) {
        move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/" . basename($_FILES["file"]["name"]));
        echo "ファイルがアップロードされました。";
    } else {
        echo "許可されていないファイル形式です。";
    }
}
?>