图片上传前预览

最新推荐文章于 2024-01-18 15:27:25 发布

原创最新推荐文章于 2024-01-18 15:27:25 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#H5

专题技术文献专栏收录该内容

57 篇文章

订阅专栏

博客介绍了实现图片预览功能的简便方法，即使用允许Web应用程序异步读取用户计算机文件内容的接口。先建好HTML页面，测试浏览器是否支持该接口，支持后编写showimgfun()方法，还介绍了FileReader的相关事件，最后进行效果测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前为了实现这个图片预览的功能，我在选择图片之后就将其添加到项目中，再查询出来（捂脸），后来发现有更简单方便的方法：使用FileReader接口

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

我们先建好HTML页面

<input type="file" name="addimg" onchange="showimgfun(this)" id="addimg" />
<img id="showimg" style="max-height: 600px;max-width: 600px;margin-top: 20px;" />

在使用FileReader之前，先测一下当前浏览器是否支持FileReader接口

if(typeof FileReader == 'undefined'){
	alert("当前浏览器不支持FileReader接口");
}

在这里插入图片描述

浏览器没有提示，说明是支持的，然后就可以开始写showimgfun()方法了

function showimgfun(obj){
	var file = obj.files[0];
	console.log(obj);console.log(file);

我们可以console看一下传进来的值
在这里插入图片描述

	var reader = new FileReader();//创建FileReader对象
	reader.onload = function(e){
		//onload是读取成功的事件
		var img = document.getElementById('showimg');
		//将返回的结果赋值给img标签的src属性
		img.src=e.target.result;
		//target可以返回事件的目标节点
	}
	 reader.readAsDataURL(file);//readAsDataURL方法可以将读取到的文件编码成Data URL
}