HTML5的FormData怎么用？如何上传文件？

<input type="text" id="userName" value="张三">
<input type="file" id="avatarFile">
<button id="uploadBtn">上传</button>

<script>
document.getElementById('uploadBtn').addEventListener('click', function() {
    const userNameInput = document.getElementById('userName');
    const avatarFileInput = document.getElementById('avatarFile');
    const selectedFile = avatarFileInput.files[0]; // 获取用户选择的第一个文件

    if (!selectedFile) {
        alert('请选择一个文件！');
        return;
    }

    // 创建 FormData 对象
    const formData = new FormData();

    // 添加普通文本字段
    formData.append('userName', userNameInput.value);

    // 添加文件
    // 'avatar' 是服务器端接收文件时的字段名
    formData.append('avatar', selectedFile, selectedFile.name);

    // 使用 Fetch API 发送请求
    fetch('/upload-endpoint', {
        method: 'POST',
        body: formData // 直接将 FormData 对象作为 body
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络请求失败，状态码: ' + response.status);
        }
        return response.json(); // 或 response.text()
    })
    .then(data => {
        console.log('上传成功:', data);
        alert('文件上传成功！');
    })
    .catch(error => {
        console.error('上传过程中发生错误:', error);
        alert('文件上传失败: ' + error.message);
    });

    // 如果你更习惯用 XMLHttpRequest:
    /*
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-endpoint', true);
    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('上传成功:', xhr.responseText);
            alert('文件上传成功！');
        } else {
            console.error('上传失败:', xhr.status, xhr.statusText);
            alert('文件上传失败！');
        }
    };
    xhr.onerror = function() {
        console.error('网络错误或请求失败');
        alert('文件上传失败: 网络错误');
    };
    xhr.send(formData); // 直接发送 FormData 对象
    */
});
</script>

// ... 假设你已经获取了文件输入元素
const galleryFileInput = document.getElementById('galleryFiles');
const selectedFiles = galleryFileInput.files; // 这是一个 FileList 对象

if (selectedFiles.length === 0) {
    alert('请选择至少一个文件！');
    return;
}

const formData = new FormData();

// 遍历 FileList，将每个文件添加到 FormData
// 这里我们将所有文件都用同一个字段名 'galleryImages' 来发送
// 服务器端通常会接收到一个数组
for (let i = 0; i < selectedFiles.length; i++) {
    const file = selectedFiles[i];
    formData.append('galleryImages', file, file.name); // 注意这里是 'galleryImages'
}

// 如果你希望每个文件有不同的字段名，比如 image1, image2...
// for (let i = 0; i < selectedFiles.length; i++) {
//     const file = selectedFiles[i];
//     formData.append('image' + (i + 1), file, file.name);
// }

// ... 之后通过 fetch 或 XMLHttpRequest 发送 formData
fetch('/upload-multiple-endpoint', {
    method: 'POST',
    body: formData
})
.then(response => response.json())
.then(data => {
    console.log('多文件上传成功:', data);
    alert('多文件上传成功！');
})
.catch(error => {
    console.error('多文件上传失败:', error);
    alert('多文件上传失败: ' + error.message);
});

<input type="file" id="largeFile">
<button id="uploadLargeFileBtn">上传大文件</button>
<div id="progressBarContainer" style="width: 300px; background-color: #f0f0f0; border-radius: 5px; margin-top: 10px;">
    <div id="progressBar" style="width: 0%; height: 20px; background-color: #4CAF50; text-align: center; line-height: 20px; color: white; border-radius: 5px;">0%</div>
</div>
<p id="uploadStatus" style="margin-top: 10px; color: #555;"></p>

<script>
document.getElementById('uploadLargeFileBtn').addEventListener('click', function() {
    const fileInput = document.getElementById('largeFile');
    const progressBar = document.getElementById('progressBar');
    const uploadStatus = document.getElementById('uploadStatus');
    const file = fileInput.files[0];

    if (!file) {
        alert('请选择一个文件！');
        return;
    }

    progressBar.style.width = '0%';
    progressBar.textContent = '0%';
    uploadStatus.textContent = '准备上传...';

    const formData = new FormData();
    formData.append('uploadedFile', file, file.name);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload-large-file-endpoint', true);

    // 监听上传进度
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            progressBar.style.width = percentComplete.toFixed(2) + '%';
            progressBar.textContent = percentComplete.toFixed(0) + '%';
            uploadStatus.textContent = `上传中: ${percentComplete.toFixed(0)}%`;
        }
    };

    // 上传完成（无论成功失败）
    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 成功
            console.log('上传成功:', xhr.responseText);
            uploadStatus.textContent = '上传成功！';
            progressBar.style.backgroundColor = '#4CAF50'; // 绿色
        } else {
            // 失败（HTTP 状态码非 2xx）
            console.error('上传失败:', xhr.status, xhr.statusText, xhr.responseText);
            uploadStatus.textContent = `上传失败: ${xhr.status} ${xhr.statusText || ''}`;
            progressBar.style.backgroundColor = '#f44336'; // 红色
        }
    };

    // 上传出错（网络错误等）
    xhr.onerror = function() {
        console.error('网络错误或请求失败');
        uploadStatus.textContent = '上传失败: 网络错误或服务器无响应';
        progressBar.style.backgroundColor = '#f44336'; // 红色
    };

    // 上传取消
    xhr.onabort = function() {
        console.warn('上传已取消');
        uploadStatus.textContent = '上传已取消。';
        progressBar.style.backgroundColor = '#ff9800'; // 橙色
    };

    xhr.send(formData);
});
</script>