利用jQuery实现图片上传在线预览功能

jQuery
312
0
0
2022-05-05

其核心是利用将图片读取成同样大小的base64字符。

1、未上传图片

利用jQuery实现图片上传在线预览功能

未上传的效果

2、上传图片后的预览效果

利用jQuery实现图片上传在线预览功能

上传图片后的预览效果

jQuery核心代码:

<script>
    $('.a').change(function(e) {
        var purl = window.URL || window.webkitURL;
        var file, img;
        if((file = this.files[0])) {
            img = new Image();
            img.onload = function() {
                $('.img').attr('src', this.src);
            };
            img.src = purl.createObjectURL(file);
        }
    })
</script>

HTML核心代码:

<img class="img" width="150" height="150">

<input type="file" class="a">