js一次上传多张图片大小

基础概念

在JavaScript中，一次上传多张图片通常涉及到HTML的<input type="file" multiple>元素，它允许用户选择多个文件进行上传。上传的图片大小可以通过File API来获取和处理。

类型

单张图片上传：使用<input type="file">。
多张图片上传：使用<input type="file" multiple>。

应用场景

社交媒体平台：用户可以一次性上传多张照片到相册或发布动态。
电子商务网站：卖家可以批量上传商品图片。
在线教育平台：教师可以上传多个教学素材。

遇到的问题及解决方法

问题：如何获取上传图片的大小？

原因：用户可能不知道如何处理上传的文件，特别是如何获取每个文件的大小。

解决方法：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        console.log(`文件名: ${file.name}, 大小: ${file.size} bytes`);
    }
});

问题：如何限制上传图片的总大小？

原因：为了避免服务器资源被滥用，通常需要对上传的文件总大小进行限制。

解决方法：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const files = event.target.files;
    let totalSize = 0;
    for (let i = 0; i < files.length; i++) {
        totalSize += files[i].size;
    }
    const maxSize = 5 * 1024 * 1024; // 5MB
    if (totalSize > maxSize) {
        alert('上传的图片总大小不能超过5MB');
        event.target.value = ''; // 清空选择
    } else {
        // 继续处理上传逻辑
    }
});

问题：如何预览上传的图片？

原因：用户在上传前可能需要预览图片以确保选择的文件正确无误。

解决方法：

<input type="file" id="fileInput" multiple>
<div id="preview"></div>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const preview = document.getElementById('preview');
    preview.innerHTML = ''; // 清空之前的预览
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px'; // 设置预览图片的大小
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    }
});
</script>

通过这些方法，可以有效处理多张图片上传时可能遇到的问题，提升用户体验和应用性能。