JavaScript实现图片实时预览功能
程序员文章站
2022-04-19 20:15:26
...
本篇文章给大家分享的内容是JavaScript实现图片实时预览功能，有着一定的参考价值，有需要的朋友可以参考一下
FileReader 获取图片的base64 代码 并预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
width: 170px;
height: 170px;
border: 1px solid lightgray;
}
.img>img{
width: 170px;
height: 170px;
}
</style>
</head>
<body>
<input type="file" id="file">
<p class="img">
<img src="" alt="" id="img">
</p>
<script>
window.onload=function () {
/*请将input的id设为file img标签的id设为img**/
var file=document.getElementById('file');
var img=document.getElementById('img');
var dataImg;
file.onchange=function () {
//判断是否支持FileReader
if(typeof FileReader==="undefined"){
alert('您的浏览器不支持');
}
//读取文件
var result=this.files[0];
//获取文件类型
var type=result.type;
if(!type){
alert('请上传图片');
}else {
//判断图片类型
type=type.split('/')[1];
console.log(type);
//使用正则匹配判断是否是jpeg,jpg,png,bmp,gif图片类型
if(type.match(/^(jpg|bmp|png|jpeg|gif)$/g)){
console.log(result);
//声明一个fileReader
var reader=new FileReader();
//以数据流的形式读取图片
reader.readAsDataURL(result);
//图片读取完毕后执行操作
reader.onload=function (e) {
//获取图片读取结果
dataImg=this.result;
//加载图爿到标签上
img.setAttribute('src',dataImg);
};
}
else {
alert("请上传图片格式");
//清空input
this.value='';
}
}
}
}
</script>
</body>
</html>
相关推荐：
以上就是JavaScript实现图片实时预览功能的详细内容，更多请关注其它相关文章！
下一篇： Vue数据监听watch方法使用详解