图片上传并显示

最新推荐文章于 2024-05-16 13:33:51 发布

人人黑眼圈

最新推荐文章于 2024-05-16 13:33:51 发布

阅读量411

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42800468/article/details/126285123

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

图片上传并显示

分析：
1、元素：文件上传框input、图片img
2、js步骤：接收文件（files）、读取文件（FileReader类）、进行编码（fileReader.readAsDataURL(xxx)）、展示

代码如下：

<!DOCTYPE html>
<html lang="en">

<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 type="file" id="image" onchange="showImg()" accept="image/jpeg,image/png,image/jpg" />
	<!-- 图片展示区域 -->
	<img src="" style="display: none" width="200px" height="120px;">	

	<script>
		function showImg () {
			// 1、获取文件
			var file = document.querySelector('input').files[0];
			// 获取到的file包含了文件信息，我们可以打印一下看看里面的内容
			console.log(file);
			// 2、创建fileReader对象
			var fileReader = new FileReader();
			
			if (file) { 
				// 3、如果文件存在，将整个文件进行编码readAsDataURL()
				fileReader.readAsDataURL(file);
			}
			// 4、将编码后的结果放到src中并显示图片
			// onloadend 事件在读取操作结束时触发。
			fileReader.onloadend = function () {
				document.querySelector('img').setAttribute("style", "display:inline-block");
				document.querySelector('img').setAttribute("src", fileReader.result);
			};
		}
	</script>
</body>
</html>

人人黑眼圈

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片上传并显示

2、js步骤：接收文件（files）、读取文件（FileReader类）、进行编码（fileReader.readAsDataURL(xxx)）、展示。// 3、如果文件存在，将整个文件进行编码readAsDataURL()// 获取到的file包含了文件信息，我们可以打印一下看看里面的内容。// onloadend 事件在读取操作结束时触发。// 4、将编码后的结果放到src中并显示图片。1、元素：文件上传框input、图片img。// 2、创建fileReader对象。...
复制链接

扫一扫