JavaScript实现图片实时预览功能
程序员文章站
2022-04-23 23:35:21
...
本篇文章给大家分享的内容是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项目内引入icon图标
下一篇: 利用Vue.js做出可配置登录表单