使用FileReader制作一个简短图片上传

KeYiTangPing

于 2022-11-22 12:00:40 发布

阅读量259

点赞数

分类专栏： JS 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_37117408/article/details/127980143

版权

JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

使用FileReader制作一个简短图片上传

- 效果示例图
- 代码示例图

效果示例图

在这里插入图片描述

代码示例图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" id="fileElem" multiple accept="image/*" style="display:none"
			onchange="handleFiles(this.files)">
		<button id="fileSelect">上传文件</button>

		<div id="imgBox"></div>
	</body>
	<script type="text/javascript">
		const fileSelect = document.getElementById("fileSelect"),
			fileElem = document.getElementById("fileElem");

		fileSelect.addEventListener("click", function(e) {
			if (fileElem) {
				fileElem.click();
			}
		}, false);

		function handleFiles(files) {
			console.log("[files]", files)
			const tempFiles = files;
			for (let i = 0; i < files.length; i++) {
				//使用 FileReader() 构造器去创建一个新的 FileReader.
				const fr = new FileReader();
				/**
				 * 处理事件
				 *事件			描述
				 *onabort		中断时触发
				 *onerror 		出错时触发
				 *onload		文件读取成功完成时触发
				 *onloadend		读取完成触发，无论成功或失败
				 *onloadstart	读取开始时触发
				 *onprogress	读取中
				 * **/
				fr.onload = (e) => {
					console.log("[e]", e)
					tempFiles[i]['DataURL'] = e.currentTarget.result;
					const img = document.createElement("img");
					img.src = e.currentTarget.result;
					document.querySelector("#imgBox").appendChild(img)
				}
				/**
				 * 方法名				参数		描述
				 *abort					none		中断读取
				 *readAsBinaryString	file		将文件读取为二进制码
				 *readAsDataURL			file		将文件读取为 DataURL
				 *readAsText			file, [encoding] 将文件读取为文本
				 * **/
				fr.readAsDataURL(files[i])
			}
			console.log(tempFiles)
		}
	</script>
</html>

参考链接