当前位置：首页 > jquery

jquery图片预览

2026-03-16 10:23:09jquery

jQuery 图片预览实现方法

方法一：使用原生 JavaScript 和 jQuery 结合实现

通过监听文件输入框的 change 事件，获取用户选择的图片文件，使用 FileReader API 读取图片并显示预览。

$(document).ready(function() {
    $('#imageUpload').change(function(e) {
        var file = e.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(event) {
                $('#imagePreview').attr('src', event.target.result);
            }
            reader.readAsDataURL(file);
        }
    });
});

HTML 部分需要包含文件输入框和图片预览元素：

<input type="file" id="imageUpload" accept="image/*">
<img id="imagePreview" src="#" alt="预览图片" style="max-width: 300px; display: none;">

方法二：使用 jQuery 插件实现更丰富的预览功能

引入 jQuery 和插件文件：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-preview-image@1.0.0/dist/jquery.preview-image.min.js"></script>

初始化插件：

$('#imageUpload').previewImage({
 preview: '#imagePreview',
 maxWidth: 500,
 maxHeight: 500
});

方法三：实现多图片预览

通过循环处理多个文件，为每个文件创建预览元素：

$('#multiImageUpload').change(function(e) {
    $('#previewContainer').empty();
    var files = e.target.files;
    $.each(files, function(i, file) {
        if (file.type.match('image.*')) {
            var reader = new FileReader();
            reader.onload = function(event) {
                $('<img>').attr({
                    src: event.target.result,
                    class: 'thumbnail'
                }).appendTo('#previewContainer');
            }
            reader.readAsDataURL(file);
        }
    });
});

注意事项