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">
<div class="img">
<img src="" alt="" id="img">
</div>
<script>
window.οnlοad=function () {
/*请将input的id设为file img标签的id设为img**/
var file=document.getElementById('file');
var img=document.getElementById('img');
var dataImg;
file.οnchange=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.οnlοad=function (e) {
//获取图片读取结果
dataImg=this.result;
//加载图爿到标签上
img.setAttribute('src',dataImg);
};
}
else {
alert("请上传图片格式");
//清空input
this.value='';
}
}
}
}
</script>
</body>
</html>