JavaScript实现图片实时预览功能

来源：动视网责编：小采时间：2020-11-27 19:55:46

JavaScript实现图片实时预览功能

JavaScript实现图片实时预览功能:本篇文章给大家分享的内容是JavaScript实现图片实时预览功能，有着一定的参考价值，有需要的朋友可以参考一下FileReader 获取图片的base 代码并预览<!DOCTYPE html> <html lang="en"> <head>

推荐度：

点击下载本文 文档为doc格式

导读JavaScript实现图片实时预览功能:本篇文章给大家分享的内容是JavaScript实现图片实时预览功能，有着一定的参考价值，有需要的朋友可以参考一下FileReader 获取图片的base 代码并预览<!DOCTYPE html> <html lang="en"> <head>

本篇文章给大家分享的内容是JavaScript实现图片实时预览功能，有着一定的参考价值，有需要的朋友可以参考一下

FileReader 获取图片的base 代码并预览

<!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>