使用readAsDataURL方法预览图片
使用FileReader接口的readAsDataURL方法实现图片的预览。
在FileReader出现之前，前端的图片预览是这样实现的：把本地图片上传到服务器，服务器把图片地址返回，并把它替换到图片元素的src属性。
这种方法的缺点是：必须要先把图片上传到服务器。那么问题来了，如果上传的图片很大，而网速又很慢，这就需要等待很久预览图片才会显示出来了，而且，如果用户预览图片后发现不太满意，想重新选择一张图片，这时候还要把已经上传到服务器上的图片给删除掉。
自从有了HTML5的FileReader对象以后，预览图片变得简单多了，不再需要后台的配合，并且JS操作本地文件已经成为了可能。这种方法的思路是：通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码，然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的，可以看一下这里：FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
下面是使用FileReader进行图片预览的简单demo：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<title>通过filereader接口读取文件</title>
<script type="text/javascript">
var inputElement = document.querySelector('.head-portrait');
inputElement.addEventListener('change', readAsDataURL);
function readAsDataURL() {
//判断浏览器是否支持filereader
if(typeof FileReader=='undifined') {
result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>";
return false;
}
var file= inputElement.files[0];
//判断获取的是否为图片文件
if(!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像文件");
return false;
}
var reader=new FileReader();
//readAsDataURL读取文件并将文件数据以URL形式保存到result属性中
reader.readAsDataURL(file);
reader.onload=function(e) {
//result为base64数据
var imgData = this.result;
imgShow.setAttribute('src', imgData);
}
}
</script>
</head>
<div>
<img class="imgshow" />
<input type="file" class="head-portrait" accept="image/*" />
</div>
<body>
</body>
</html>
posted on 2018-06-27 18:29 ranyonsue 阅读(2332) 评论(0) 编辑 收藏 举报
