js 怎么实现文件上传

input type="file"

<input type="file" id="fileInput" multiple>
<button id="uploadButton">上传文件</button>
<div id="uploadProgress"></div>

document.addEventListener('DOMContentLoaded', () => {
    const fileInput = document.getElementById('fileInput');
    const uploadButton = document.getElementById('uploadButton');
    const uploadProgress = document.getElementById('uploadProgress');

    uploadButton.addEventListener('click', async () => {
        if (fileInput.files.length === 0) {
            alert('请选择要上传的文件！');
            return;
        }

        const filesToUpload = fileInput.files;
        const formData = new FormData();

        // 遍历所有选中的文件，将它们添加到 FormData 对象中
        // 'myFiles' 是后端接收文件时使用的字段名
        for (let i = 0; i < filesToUpload.length; i++) {
            formData.append('myFiles', filesToUpload[i]);
        }

        try {
            uploadProgress.textContent = '开始上传...';
            // 使用 Fetch API 发送 POST 请求
            const response = await fetch('/upload-endpoint', { // 替换为你的后端上传接口地址
                method: 'POST',
                body: formData
                // 注意：当使用 FormData 时，浏览器会自动设置正确的 Content-Type，
                // 通常是 'multipart/form-data'，所以不需要手动设置 header
            });

            if (response.ok) {
                const result = await response.json(); // 假设后端返回JSON
                uploadProgress.textContent = '上传成功！服务器响应: ' + JSON.stringify(result);
                // 可以在这里清空文件输入框或者进行其他UI更新
                fileInput.value = ''; // 清空已选择的文件
            } else {
                const errorText = await response.text();
                uploadProgress.textContent = '上传失败！状态: ' + response.status + ', 错误: ' + errorText;
            }
        } catch (error) {
            console.error('上传过程中发生错误:', error);
            uploadProgress.textContent = '上传过程中出现网络或其他错误: ' + error.message;
        }
    });

    // 监听文件选择变化，可以用来显示文件名等
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            let fileNames = Array.from(fileInput.files).map(file => file.name).join(', ');
            uploadProgress.textContent = `已选择文件: ${fileNames}`;
        } else {
            uploadProgress.textContent = '未选择文件';
        }
    });
});

multipart/form-data

progress

ReadableStream

// 假设你有一个进度条元素 <div id="progressBar" style="width:0%; background: blue; height: 20px;"></div>
// 和一个显示百分比的文本元素 <span id="progressText">0%</span>

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

// 监听上传过程中的 progress 事件
xhr.upload.onprogress = (event) => {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        if (progressBar) progressBar.style.width = percentComplete.toFixed(2) + '%';
        if (progressText) progressText.textContent = percentComplete.toFixed(2) + '%';
    }
};

xhr.onload = () => {
    // 上传完成后的处理
    console.log('上传完成:', xhr.responseText);
    // 更新UI为上传成功
};

xhr.onerror = () => {
    // 上传失败或网络错误
    console.error('上传失败');
    // 更新UI为上传失败
};

// 准备 FormData 并发送
const formData = new FormData();
// ... 添加文件到 formData ...
xhr.send(formData);

xhr.abort()

const controller = new AbortController();
const signal = controller.signal;

// 当用户点击取消按钮时
document.getElementById('cancelUploadButton').addEventListener('click', () => {
    controller.abort(); // 这会中断正在进行的 fetch 请求
    console.log('上传已取消！');
    // 更新UI，例如显示“上传已取消”
});

// 发起 fetch 请求时，传入 signal
fetch('/upload-endpoint', {
    method: 'POST',
    body: formData, // 假设 formData 已经准备好
    signal: signal // 将 AbortController 的 signal 传递给 fetch
})
.then(response => {
    if (response.ok) {
        console.log('上传成功！');
    } else {
        console.error('上传失败:', response.status);
    }
})
.catch(error => {
    if (error.name === 'AbortError') {
        console.log('Fetch 请求被中止。');
    } else {
        console.error('Fetch 错误:', error);
    }
});