关于前端如何通过 JS 读取本地图片并预览在页面中

原创于 2022-05-30 09:41:41 发布 · 5.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

博客涉及前端领域，重点围绕JavaScript展开，但具体内容未给出。JavaScript是前端开发的重要技术，在网页交互等方面有广泛应用。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<input id="myInput" type="file" onchange="getFile">
	<img id="myImage" src="" alt="">
	<script>
		document.getElementById("myInput").addEventListener("change", getFile, true)

		function getFile(file) {
			if (!file) {
				return;
			}
			const {
				files
			} = file.target;
			if (files.length <= 0) return;
			const fileReader = new FileReader();
			fileReader.readAsDataURL(files[0]);
			fileReader.onload = (event) => {
				console.log(event);
				try {
					const {
						result
					} = event.target;
					document.getElementById("myImage").src = result;
				} catch (e) {
					console.log(e);
				}
			};
		}
	</script>
</body>

</html>