PHP Ajax 無刷新文件上傳完整實作：FormData、進度條、大文件配置、move_uploaded_file、安全驗證

現代 Web 文件上傳標準方案：HTML5 FormData + XMLHttpRequest Level 2 實現無刷新上傳、原生進度條、PHP 後端處理、大文件配置優化、安全驗證最佳實踐、多文件/拖拽擴展基礎。

前端核心代碼

無刷新文件上傳

    
用戶名: 
    
密碼: 
    
郵箱: 
    
頭像: 
    

    上傳

後端處理 (fileupload.php)

 '超過 php.ini upload_max_filesize',
        UPLOAD_ERR_FORM_SIZE  => '超過表單 MAX_FILE_SIZE',
        UPLOAD_ERR_PARTIAL    => '部分上傳',
        UPLOAD_ERR_NO_FILE    => '未選擇文件',
        UPLOAD_ERR_NO_TMP_DIR => '臨時目錄不存在',
        UPLOAD_ERR_CANT_WRITE => '寫入失敗',
        UPLOAD_ERR_EXTENSION  => '擴展中斷',
    ];
    die('上傳錯誤: ' . ($errors[$error] ?? '未知錯誤'));
}

// 安全：驗證 MIME 類型 (防偽裝)
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $tmpName);
$allowed = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
if (!in_array($mime, $allowed)) {
    die('不允許的文件類型: ' . $mime);
}

// 安全：生成隨機檔名防覆蓋/注入
$ext = pathinfo($originName, PATHINFO_EXTENSION);
$newName = uniqid('upload_', true) . '.' . $ext;
$dest = $uploadDir . $newName;

if (move_uploaded_file($tmpName, $dest)) {
    echo "上傳成功! 文件: $newName";
    // 可返回 JSON 供前端解析: echo json_encode(['url' => '/upload/' . $newName]);
} else {
    echo "上傳失敗: 移動文件錯誤";
}
?>

大文件上傳配置優化

修改 php.ini 後重啟 PHP-FPM/Apache；Nginx 修改 nginx.conf 重載。

上傳細節與安全最佳實踐

• 臨時文件清理：PHP 請求結束自動刪除 tmp_name，move_uploaded_file 後無需手動刪
• MIME 驗證：finfo_file 而非信任 $_FILES['type'] (客戶端可偽造)
• 副檔名白名單：雙重驗證
• 隨機檔名：uniqid() / hash() 防覆蓋、防路徑穿透
• 儲存目錄權限：0755、不可執行、Nginx location ~ \.php$ { deny all; } 禁用腳本執行
• 病毒掃描：生產環境接入 ClamAV 或雲端安全 API
• 圖片處理：上傳後 getimagesize() 驗證真實圖片、imagecreatefromstring() 重編碼剝離 EXIF/腳本

進階擴展方向

• 分片上傳/斷點續傳：前端切片 (SparkMD5 計算哈希)、後端合併、Redis 記錄進度
• 多文件/拖拽上傳：input[multiple] + drop 事件
• 雲端直傳：簽名直傳 OSS/S3，後端僅驗證回調
• WebUploader / Dropzone.js：成熟前端組件庫封裝上述所有功能