JavaScript中高效处理和发送多文件上传：FormData最佳实践

// 获取文件输入框
const fileInput = document.getElementById('files');
// 获取用户选择的文件列表
const files = fileInput.files; // 这是一个 FileList 对象

// 创建 FormData 实例
const formData = new FormData();

// 遍历 FileList，将每个文件追加到 FormData 中
// 使用 "images[]" 作为键名，后端会将其解析为文件数组
for (let i = 0; i < files.length; i++) {
    formData.append("images[]", files[i]);
}

// 或者使用更现代的 for...of 循环
// for (const file of files) {
//     formData.append("images[]", file);
// }

// 此时，formData 包含了所有选定的文件，每个文件都关联到 "images[]" 这个键
// 我们可以通过 formData.getAll('images[]') 来验证
// console.log(formData.getAll('images[]')); // 这将返回一个包含所有 File 对象的数组

const fileInput = document.getElementById('files');
const files = fileInput.files;
const formData = new FormData();

// 遍历 FileList，为每个文件生成一个唯一的键名
for (let i = 0; i < files.length; i++) {
    formData.append(`image_${i}`, files[i]); // 例如：image_0, image_1, ...
}

// 此时，formData 包含了所有选定的文件，每个文件都有一个独立的键
// console.log(formData.get('image_0')); // 获取第一个文件

// 这种方法通常不用于上传实际文件内容
File.prototype.toObject = function () { /* ... */ };
FileList.prototype.toArray = function () { /* ... */ };

let files = document.getElementById('files').files;
let filesArray = files.toArray(); // 将 FileList 转换为包含文件元数据的数组
let formData = new FormData();
formData.append('images[]', JSON.stringify(filesArray)); // 将元数据字符串化后作为单个值发送

// 假设 formData 已经填充了文件数据
fetch('/admin/gallery', {
    method: 'POST',
    // 当使用 FormData 作为 body 时，无需手动设置 Content-Type 头。
    // 浏览器会自动设置正确的 'multipart/form-data' 并包含边界字符串。
    // headers: {
    //     'X-Requested-With': 'XMLHttpRequest' // 可选：用于后端识别 AJAX 请求
    // },
    body: formData, // 直接将 FormData 对象作为请求体
})
.then(response => {
    // 检查响应状态码
    if (!response.ok) {
        // 如果响应不成功，抛出错误
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    // 根据后端返回的数据类型解析响应
    return response.json(); // 或 response.text(), response.blob() 等
})
.then(data => {
    console.log('文件上传成功:', data);
    // 处理成功响应
})
.catch(error => {
    console.error('文件上传失败:', error);
    // 处理错误
});

<?php
if (isset($_FILES['images'])) {
    $files = $_FILES['images'];

    // 遍历上传的文件
    for ($i = 0; $i < count($files['name']); $i++) {
        $fileName = $files['name'][$i];
        $fileTmpName = $files['tmp_name'][$i];
        $fileSize = $files['size'][$i];
        $fileError = $files['error'][$i];
        $fileType = $files['type'][$i];

        // 检查文件上传是否成功
        if ($fileError === UPLOAD_ERR_OK) {
            // 将文件从临时目录移动到目标位置
            $uploadDir = 'uploads/';
            $destination = $uploadDir . basename($fileName);
            if (move_uploaded_file($fileTmpName, $destination)) {
                echo "文件 {$fileName} 上传成功！<br>";
            } else {
                echo "文件 {$fileName} 上传失败。<br>";
            }
        } else {
            echo "文件 {$fileName} 上传错误: {$fileError}<br>";
        }
    }
} else {
    echo "没有接收到文件。<br>";
}
?>

<?php
$uploadDir = 'uploads/';
foreach ($_FILES as $key => $file) {
    // 检查键名是否符合我们的动态命名规则
    if (strpos($key, 'image_') === 0) {
        $fileName = $file['name'];
        $fileTmpName = $file['tmp_name'];
        $fileError = $file['error'];

        if ($fileError === UPLOAD_ERR_OK) {
            $destination = $uploadDir . basename($fileName);
            if (move_uploaded_file($fileTmpName, $destination)) {
                echo "文件 {$fileName} ({$key}) 上传成功！<br>";
            } else {
                echo "文件 {$fileName} ({$key}) 上传失败。<br>";
            }
        } else {
            echo "文件 {$fileName} ({$key}) 上传错误: {$fileError}<br>";
        }
    }
}
?>