PHP 實現動態多文件上傳完整指南

前言

在 Web 開發中，文件上傳是常見功能。本文將詳細介紹如何使用 PHP 結合 JavaScript 實現動態多文件上傳，允許用戶通過點擊按鈕動態增加文件選擇框，一次提交上傳多個文件。

核心原理

• 前端：使用 `` 陣列命名方式，配合 JavaScript 動態插入新的文件輸入行。
• 後端：PHP 通過 `$_FILES['filelist']` 獲取多維陣列，遍歷處理每個文件的臨時路徑、名稱、類型與大小，並移動到指定目錄。

前端頁面代碼 (upload.html)

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>動態多文件上傳示例</title>
    <script>
        function addFileInput() {
            const table = document.getElementById('fileTable');
            const row = table.insertRow(-1);
            const cell = row.insertCell(0);
            cell.innerHTML = "<input type='file' name='filelist[]' size='50' />";
        }
    </script>
</head>
<body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
        <table id="fileTable" width="500" border="0">
            <tr>
                <td>
                    文件上傳列表
                    <input type="button" value="添加文件" onclick="addFileInput()" />
                </td>
            </tr>
            <tr>
                <td><input type="file" name="filelist[]" size="50" /></td>
            </tr>
        </table>
        <br>
        <input type="submit" name="submitfile" value="提交上傳" />
    </form>
</body>
</html>

後端處理代碼 (upload.php)

<?php
if (isset($_POST['submitfile'])) {
    // 以年月建立子目錄，避免單目錄文件過多
    $uploadDir = __DIR__ . '/uploads/' . date('Ym') . '/';
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0755, true);
    }

    $files = $_FILES['filelist'];
    $count = count($files['name']);
    $success = 0;
    $failed = [];

    for ($i = 0; $i < $count; $i++) {
        // 跳過未選擇文件的輸入框
        if ($files['error'][$i] === UPLOAD_ERR_NO_FILE) continue;

        // 錯誤檢查
        if ($files['error'][$i] !== UPLOAD_ERR_OK) {
            $failed[] = $files['name'][$i] . ' (錯誤代碼: ' . $files['error'][$i] . ')';
            continue;
        }

        // 安全檢查：文件大小、類型等（此處略，實際項目務必加強）
        $tmpName = $files['tmp_name'][$i];
        $origName = basename($files['name'][$i]);
        // 防止文件名衝突：加上時間戳前綴
        $newName = date('YmdHis') . '_' . $origName;
        $destPath = $uploadDir . $newName;

        if (move_uploaded_file($tmpName, $destPath)) {
            $success++;
            echo "<div>✅ 文件上傳成功：{$origName} (類型: {$files['type'][$i]})</div>";
        } else {
            $failed[] = $origName . ' (移動失敗)';
        }
    }

    echo "<hr><p>共成功上傳 {$success} 個文件。</p>";
    if ($failed) {
        echo "<p style='color:red'>失敗文件：<br>" . implode('<br>', $failed) . "</p>";
    }
    echo "<a href='upload.html'>返回繼續上傳</a>";
}
?>

關鍵點總結

1. 表單屬性：必須設置 `enctype="multipart/form-data"` 且 `method="post"`。
2. 名稱陣列：所有文件輸入框的 `name` 必須為 `filelist[]`，PHP 才會接收為陣列結構。
3. 錯誤處理：務必檢查 `$_FILES['filelist']['error'][$i]`，排除 `UPLOAD_ERR_NO_FILE`（用戶未選文件）與其他上傳錯誤。
4. 安全建議：生產環境應驗證 MIME 類型、限制副檔名、使用隨機文件名、設置上傳目錄不可執行腳本等。
5. 目錄權限：確保 PHP 進程對上傳目錄擁有寫入權限（Linux 下通常為 755 或 775）。

進階優化方向

• 使用 AJAX (Fetch/XHR) 配合 `FormData` 實現無刷新上傳並顯示進度條。
• 前端集成 Plupload、Dropzone.js 等成熟庫，支援拖拽、分片上傳、圖片預覽。
• 後端引入圖片壓縮、病毒掃描、雲存儲 (S3/OSS) 對接等企業級功能。

掌握動態多文件上傳後，您可以輕鬆構建圖庫、附件系統、批量導入等實用功能。祝編碼愉快！