js实现实时预览用户点击选择的本地图片

最新推荐文章于 2023-08-08 00:14:46 发布

铁骨铮铮炜师傅

最新推荐文章于 2023-08-08 00:14:46 发布

阅读量558

点赞数

本文链接：https://blog.csdn.net/qq_45401638/article/details/103128915

版权

看代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--this表示当前的input 框的对象吧  -->
	<input type="file" id="file-id" onchange="newfile(this)" />
	<img src="" id="img-id" alt="000" />
	<script>
		function newfile(obj) {
			var reader = new FileReader();	// 实例化一个FileReader对象，用于读取文件
			//获取到img标签的对象
			var img = document.getElementById("img-id");
			//读取File对象的数据
			reader.onload = function(evt){
				img.src = evt.target.result;
			}
		    reader.readAsDataURL(obj.files[0]);
		}
	</script>
</body>
</html>

主要是js中读取file对象的数据那段比较难点吧其他的都还好可能题主了解的也不是很深，只是把解决的办法贴出来

在这里插入图片描述
就是点击选择文件就会实时切换用户选择的图片
实在看不懂我这个菜鸡写的东西也可以去这个👇地方看还不懂就没办法咯
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

铁骨铮铮炜师傅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现实时预览用户点击选择的本地图片

看代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title...
复制链接

扫一扫