js上传多张图片

JavaScript上传多张图片涉及的基础概念主要包括文件选择、文件读取、异步处理和数据传输。以下是详细解答：

基础概念

文件选择：通过HTML的<input type="file" multiple>元素允许用户选择多个文件。
文件读取：使用FileReader API读取选定文件的内容。
异步处理：利用Promise和async/await管理异步操作，确保文件读取和上传的流畅性。
数据传输：通常通过AJAX（如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>Upload Multiple Images</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <button onclick="uploadFiles()">Upload</button>
    <div id="preview"></div>

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

            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const reader = new FileReader();

                reader.onload = (event) => {
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.style.width = '100px';
                    preview.appendChild(img);
                };

                reader.readAsDataURL(file);

                // Simulate sending file to server
                await simulateUpload(file);
            }
        }

        function simulateUpload(file) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log(`File ${file.name} uploaded.`);
                    resolve();
                }, 1000);
            });
        }
    </script>
</body>
</html>