使用JS ＜input type=“file“ /＞实现简单的选择图片并实时显示

大相径庭

于 2021-05-18 23:07:10 发布

阅读量3.9k

点赞数 9

CC 4.0 BY-SA版权

文章标签： js html5

本文链接：https://blog.youkuaiyun.com/weixin_50258490/article/details/117002630

本文介绍了一种使用HTML和JavaScript实现的简单方法，用于在用户选择文件后立即预览所选图片。通过FileReader API，可以将图片转换为Base64编码格式并显示在网页上。

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

html：

<img style="width: 200px" id="img" src="">
<input type="file"  onchange="displayimg(this)"  name="myfile">

JavaScript：

function displayimg(input){
	//获取第一个文件对象 （如果有多张时可使用循环files数组改变多个<img>的 src值）
	var file = input.files[0];
	//判断当前是否支持使用FileReader
	if(window.FileReader){
		//创建读取文件的对象
		var fr = new FileReader();
		//以读取文件字符串的方式读取文件 但是不能直接读取file 
		//因为文件的内容是存在file对象下面的files数组中的
		//该方法结束后图片会以data:URL格式的字符串（base64编码）存储在fr对象的result中
		fr.readAsDataURL(file);
		fr.onloadend = function(){
			document.getElementById("img").src = fr.result;
		}
	}
}

效果展示：

在这里插入图片描述