JS前端网页选择图片后,将其图片转换成Base64编码并展示预览

这篇文章也是和以前一样哈,网上很多你可能试过了,那就看这篇啦!

1.这是我前端的代码,有一个img标签,用来显示图片用的,还有一个 input type是file的输入框,其实就是选择图片的:

2.前端展示效果是这样的,可以看到直接是选择文件,img控件是隐藏的:

JS前端网页选择图片后,将其图片转换成Base64编码并展示预览_第1张图片

3.我们写个js方法,用来监听“选择文件”按钮的事件,以便拿到图片资源后,立即将图片转换成base64编码,并且在img控件中展示其效果:

function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
            $("#base64Img").attr("style","display:inline-block");
            $("#base64Img").attr("src",reader.result);
            console.log(reader.result);
        }
        if (file) {
            reader.readAsDataURL(file);
        }
    }

4.效果:

JS前端网页选择图片后,将其图片转换成Base64编码并展示预览_第2张图片

控制台打印出来了base64:

JS前端网页选择图片后,将其图片转换成Base64编码并展示预览_第3张图片

 

注意:主要是JS这段代码,HTML代码我里面加了样式,你可以只保留img和input标签就好了,注意onchange事件。

你可能感兴趣的:(前端的)