实现预览表单上传的图片

2020-01-28 17:33:57 最后一行代码 阅读:469

分类: 前端

效果图:

 

思路:

想要显示用户上传的图片可以用img标签,但是问题是src属性该怎么写呢。百度一下发现src还可以接收图片base64编码字符串,同样可以显示图片。那么怎么获取图片base64编码呢,使用FileReader对象.readAsDataURL()方法获取图片base64编码字符串,这样一来问题就解决了。

 

花里胡哨的样式我就不写了,偷个懒。

 

HTML代码

<input id="file" type="file" name="img" value="上传图片">
<img id="img" src="">

 

JS代码

document.getElementById('file').onchange = function(){
    var reader = new FileReader();         // 创建FileReader对象
    reader.readAsDataURL(this.files[0]);   // this.files[0]表示获取上传的第一个文件对象
    reader.onload = function(){            // 监听读取文件成功
        document.getElementById('img').src = this.result;   // this.result表示获取base64编码字符串
    };
};

 

回复:
时间排序 热度排序
老板赏瓶水呗
微信 微信 支付宝 支付宝