jQuery实现多张图片上传预览（不经过后端处理）

jQuery实现多张图片上传预览，是一种常见的前端技术，可以提升用户的体验，本文将从以下几个方面进行讲解。

实现原理

要实现多张图片上传预览的效果，需要借助HTML5的FileAPI，通过JS读取选中图片的信息，然后用DOM操作动态创建一个图片预览区域。示例代码如下：

function previewImage(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#preview').append('<img src="' + e.target.result + '" />');
    }
    reader.readAsDataURL(file);
}

其中，FileReader是HTML5的API，用于读取文件的内容；onload方法则是读取成功后的回调函数，参数e是一个事件对象，包含读取的文件内容；最后用动态创建<img>标签，将读取的文件内容赋给src属性即可。

页面布局和样式

为了美观和易用，我们要对页面进行布局和样式的设置。通常，图片上传预览区域应该是一个固定大小、居中显示的区域，可以用CSS设置如下：

#preview {
    display: flex;
    flex-wrap: wrap;
}
#preview img {
    margin: 8px;
    max-width: 200px;
    max-height: 200px;
}

上面的代码将预览区域设置为一个flex容器，用flex-wrap属性实现多行排列；图片则设置了边距、最大宽度和最大高度，使其不会撑破容器的大小。

JS代码实现

在页面加载完成后，我们需要监听文件上传框的change事件，然后取出选中的文件列表，逐个调用previewImage方法进行预览。完整的代码如下：

$(function () {
    $('#file-input').on('change', function () {
        var files = $(this)[0].files;
        for (var i = 0; i < files.length; i++) {
            previewImage(files[i]);
        }
    });
});

其中，#file-input是一个文件上传框的id，用jQuery进行选择；files是选中的文件列表，用数组形式返回，可以通过[0]获取到第一个文件；然后就可以依次调用previewImage方法进行预览。

示例说明

下面给出两个示例，帮助读者更好地理解这个技术的应用。

示例一：传统文件上传的替代

传统的文件上传方式需要刷新整个页面，不太友好。这时我们可以按照上面的方法实现一个文件上传的预览区域，用AJAX进行上传操作，从而实现上传的效果。示例代码如下：

<input type="file" id="file-input" name="files" multiple />
<div id="preview"></div>
<button id="upload-btn">上传</button>

$(function () {
    // 文件上传预览
    $('#file-input').on('change', function () {
        var files = $(this)[0].files;
        for (var i = 0; i < files.length; i++) {
            previewImage(files[i]);
        }
    });

    // 文件上传
    $('#upload-btn').on('click', function () {
        var data = new FormData();
        var files = $('#file-input')[0].files;
        for (var i = 0; i < files.length; i++) {
            data.append('files', files[i]);
        }
        $.ajax({
            url: '/upload',
            data: data,
            type: 'POST',
            contentType: false,
            processData: false,
            success: function (res) {
                alert('上传成功！');
                $('#preview').empty();
            },
            error: function () {
                alert('上传失败！');
            }
        });
    });
});

上面的代码中，FormData是一个新的API，用于构造一个表单数据对象。我们将选中的文件逐个添加到表单数据中，然后通过AJAX方式提交。需要注意的是，因为表单数据已经包含了文件内容，因此 contentType参数应该设置为false，而processData参数也应该设置为false，以避免数据被序列化。当上传完成后，我们可以将预览区域清空，以便下一次上传。

示例二：批量选择图片的预览

如果你需要上传多张图片，而且希望上传前可以对图片进行预览，选择需要上传的图片，那么我们也可以按照上面的方法实现。示例代码如下：

<input type="file" id="file-input" name="files" multiple />
<div id="preview"></div>

$(function () {
    $('#file-input').on('change', function () {
        var files = $(this)[0].files;
        $('#preview').empty();
        for (var i = 0; i < files.length; i++) {
            previewImage(files[i]);
        }
    });
});

上面的代码中，我们清空了预览区域中的所有图片，然后再依次调用previewImage方法进行预览。这样，用户就可以勾选需要上传的图片了。当用户选择完成后，我们就可以用AJAX方式将这些图片上传到服务器了。

总结

通过本文的讲解，我们了解了 jQuery 实现多张图片上传预览的方法。需要注意的是，这种实现方式不经过后台处理，可以实现前端的提示和展示，用户体验相对较好。同时，上面的示例代码只是演示，实际应用中还需要根据需要进行调整和优化。