HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果

阅读() @2018-01-07 22:20:30

使用input,type为file标签的时候,一般都是用来上传文件的,比如说在上传图片之前,我们可以在前端页面先预览一下,让用户确认是否就是上传这张图片,提升用户体验,HTML5提供了新的API,结合javascript可以实现这种效果,代码如下:

html部分:

<input type="file" id="file" onchange="showPreview(this);" />
<img src="" alt="" id="portrait" />

javascript部分:

function showPreview(This){
	//读取图片内容
	var file = This.files[0],
		fileType = file.type,
		reg = new RegExp(/jpg|jpeg|png|gif/);
	//验证是否是一张图片
	if(!reg.test(fileType.substr((fileType.lastIndexOf('/')+1)))){
		alert('不是一张图片');
		return;
	}
	//获取图片src
	if(window.FileReader){
		var fr = new FileReader(),
			portrait = document.getElementById('portrait');
		fr.onload = function(e){
			console.log(e);
			portrait.src = e.target.result;
		}
		//将文件读取为DataURL
		fr.readAsDataURL(file);
		portrait.style.display = 'block';
	}
}

将代码复制到编辑器,即可看到效果!

微信二维码