js批量上传并读取文件

基础概念

JavaScript 批量上传并读取文件主要涉及到 HTML5 的 File API 和 XMLHttpRequest 或 Fetch API。File API 允许 JavaScript 访问用户选择的文件，而 XMLHttpRequest 或 Fetch API 则用于将这些文件上传到服务器。

类型

同步上传：文件按顺序逐个上传，前一个文件上传完成后再上传下一个文件。
异步上传：文件可以同时上传，提高了上传速度。

应用场景

图片上传：用户可以一次性选择多张图片进行上传。
文档管理：用户可以批量上传多个文档文件。
数据备份：用户可以将多个文件打包上传到云端进行备份。

示例代码

以下是一个简单的示例，展示了如何使用 JavaScript 实现文件的批量上传和读取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <button onclick="uploadFiles()">Upload Files</button>
    <div id="progress"></div>

    <script>
        function uploadFiles() {
            const fileInput = document.getElementById('fileInput');
            const files = fileInput.files;
            const progressDiv = document.getElementById('progress');

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

                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    progressDiv.innerHTML += `<p>${file.name} uploaded successfully!</p>`;
                })
                .catch(error => {
                    progressDiv.innerHTML += `<p>Error uploading ${file.name}: ${error.message}</p>`;
                });
            }
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

文件大小限制：
- 问题：浏览器或服务器可能对上传的文件大小有限制。
- 解决方法：在服务器端设置合适的文件大小限制，并在前端进行提示。

上传失败：
- 问题：网络问题或服务器错误可能导致上传失败。
- 解决方法：使用 try-catch 块捕获错误，并在前端显示友好的错误信息。
进度显示不准确：
- 问题：多个文件同时上传时，进度条可能显示不准确。
- 解决方法：为每个文件单独显示进度，或者使用更复杂的进度管理机制。