js实现上传多个文件上传

基础概念

在JavaScript中实现多个文件上传通常涉及到HTML的<input>元素，特别是使用type="file"属性，并结合multiple属性来允许用户选择多个文件。上传过程可以通过AJAX请求异步完成，这样可以避免页面刷新，提升用户体验。

类型

同步上传：上传过程中会阻塞页面的其他操作。
异步上传：通过AJAX实现，上传过程中页面可继续操作。

应用场景

图片库管理：用户可以一次性上传多张图片。
文档提交系统：学生或员工可以同时上传多个作业或报告。
社交媒体平台：用户上传多张照片到社交网络。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何实现多个文件的异步上传：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multiple File Upload</title>
<script>
function uploadFiles() {
    const files = document.getElementById('fileInput').files;
    if (files.length === 0) return alert('Please select at least one file.');

    const formData = new FormData();
    for (let i = 0; i < files.length; i++) {
        formData.append('files[]', files[i]);
    }

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}
</script>
</head>
<body>

<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">Upload Files</button>

</body>
</html>

后端处理（Node.js示例）

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.array('files[]'), (req, res) => {
    res.json({ message: 'Files uploaded successfully', files: req.files });
});

app.listen(3000, () => {
    console.log('Server started on http://localhost:3000');
});

遇到的问题及解决方法

问题：上传过程中出现网络错误或服务器无响应。

原因：可能是由于网络不稳定或服务器端处理逻辑存在问题。

解决方法：

检查网络连接：确保客户端网络连接稳定。
服务器端日志：查看服务器端日志，确定是否有错误信息。
增加超时处理：在前端代码中增加请求超时处理，避免用户长时间等待无响应。

function uploadFiles() {
    // ...之前的代码...
    fetch('/upload', {
        method: 'POST',
        body: formData,
        signal: AbortSignal.timeout(10000) // 设置10秒超时
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        if (error.name === 'AbortError') {
            console.error('Request timed out');
        } else {
            console.error('Error:', error);
        }
    });
}

通过上述方法，可以有效地实现多个文件的上传，并处理可能遇到的问题。