javascript 图片上传并显示

最新推荐文章于 2024-04-18 00:52:22 发布

原创最新推荐文章于 2024-04-18 00:52:22 发布 · 852 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js 图片上传显示预览

Javascript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在JavaScript中使用FileReader对象读取文件数据，并通过示例代码展示了如何将读取到的图片数据显示在网页上。

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

在JS中可以使用FileReader对象读取文件，具体使用方法如下：

1、首先准备上传文件框和图片显示框

<input type="file" id="file" />
<img src="" id="img"/>

2、文件读取

if(window.FileReader){	//检测浏览器是否支持 FileReader
	var reader = new FileReader();	//实例化一个 FileReader 对象
	reader.onloaded = function(){	//设置文件读取后的处理方法
		var img = document.getElementById('img');	//上传图片要显示的位置

		img.src = this.result;				//this.result中是读取到的图片数据，将其设置为图片 src 值，图片就可以显示出来。
	}
	reader.readAsDataURL(document.getElementById('file').files[0]);    //readAsDataUrl() 方法将图片读取为 DataURL 格式
}