JS实现文件点击或者拖拽上传

B站看到了渡一大师课的切片，自己实现了一下，做下记录

效果展示

分为上传前、上传中和上传后

实现

分为两步

界面交互
网络请求

源码如下

`upload.html`

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>图片上传 Demo</title>
		<link rel="stylesheet" href="upload.css" />
	</head>
	<body>
		<h1>图片上传 Demo</h1>
		<div class="upload select">
			<div class="upload-select"><input type="file" accept="image/*" / ></div>
			<div class="upload-progress">
				<div class="upload-progress-bar"></div>
				<div class="upload-progress-text">文件上传中...</div>
				<button>取消</button>
			</div>
			<div class="upload-result">
				<button>删除</button>
				<img src="" alt="" class="preview" />
			</div>
		</div>

		<script src="upload.js"></script>
	</body>
</html>

`upload.js`

js 复制代码

document.addEventListener('DOMContentLoaded', function () {
	const $ = document.querySelector.bind(document);
	const doms = {
		img: $('.preview'),
		container: $('.upload'),
		select: $('.upload-select'),
		selectFile: $('.upload-select input'),
		progress: $('.upload-progress'),
		cancelBtn: $('.upload-progress button'),
		delBtn: $('.upload-result button'),
	};
	// 备用方案，不利用input拖拽，将input设置为none
	// doms.select.ondragenter = function (e) {
	// 	e.preventDefault();
	// };

	// doms.select.ondragover = function (e) {
	// 	e.preventDefault();
	// };

	// doms.select.ondrop = function (e) {
	// 	e.preventDefault();
	// 	const file = e.dataTransfer.files[0];
	// 	if (!validateFile(file)) {
	// 		return;
	// 	}
	// 	doms.selectFile.files = e.dataTransfer.files;
	// 	doms.selectFile.onchange();
	// };

	// 切换三个子界面
	function showArea(areaName) {
		doms.container.className = `upload ${areaName}`;
	}
	// 设置进度
	function setProgress(value) {
		doms.progress.style.setProperty('--progress', value + '%');
	}
	// 取消上传
	let cancelUpload = null;
	function cancel() {
		cancelUpload && cancelUpload(); // 取消网络传输
		showArea('select');
		doms.selectFile.value = '';
	}

	// 上传文件的文件变化
	doms.selectFile.onchange = function () {
		if (this.files.length === 0) {
			return;
		}

		const file = this.files[0];
		console.log(file);
		if (!validateFile(file)) {
			return;
		}
		// 切换界面
		showArea('progress');
		// 显示预览图
		const reader = new FileReader();
		reader.onload = function (e) {
			doms.img.src = e.target.result;
		};
		reader.readAsDataURL(file); // 异步的，结果需要上边的监控拿到
		upload(
			file,
			function (val) {
				setProgress(val);
			},
			function (res) {
				showArea('result');
			},
		);
	};

	// 上传文件
	function upload(file, onProgress, onFinish) {
		const xhr = new XMLHttpRequest();
		xhr.onload = function () {
			const resp = JSON.parse(xhr.responseText);
			onFinish(resp);
		};
		xhr.upload.onprogress = function (e) {
			if (e.lengthComputable) {
				const percent = Math.round((e.loaded / e.total) * 100);
				onProgress(percent);
			}
		};
		xhr.open('POST', '/upload');
		const form = new FormData();
		form.append('avatar', file);
		xhr.send(form);
	}

	// 校验
	function validateFile(file) {
		const maxSize = 1024 * 1024 * 2;
		if (file.size > maxSize) {
			alert('文件大小不能超过2M');
			return false;
		}

		const allowTypes = ['image/jpeg', 'image/png', 'image/gif'];
		if (!allowTypes.includes(file.type)) {
			alert('文件类型只能是jpg、png、gif');
			return false;
		}
		return true;
	}

	doms.cancelBtn.onclick = doms.delBtn.onclick = cancel;
});

`upload.css`

css 复制代码

body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}
.upload {
	width: 400px;
	height: 400px;
	background-color: azure;
}

/* 通过属性控制子组件显示 */
/* 当父元素有 select 类时，只显示上传选择区域 */
.upload.select .upload-select {
	display: flex;
}

.upload.select .upload-progress,
.upload.select .upload-result {
	display: none;
}

/* 当父元素有 progress 类时，只显示进度条 */
.upload.progress .upload-progress {
	display: flex;
}

.upload.progress .upload-select,
.upload.progress .upload-result {
	display: none;
}

/* 当父元素有 result 类时，只显示结果区域 */
.upload.result .upload-result {
	display: flex;
}

.upload.result .upload-select,
.upload.result .upload-progress {
	display: none;
}

.upload-select {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-image: url(./fileUplaod.svg);
	background-position: center;
	background-repeat: no-repeat;
}

/*  本身就支持拖拽 */
.upload-select input {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.upload-progress {
	--progress: 0%;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.upload-progress-bar {
	width: var(--progress);
	height: 10px;
	background-color: #4caf50;
	transition: width 0.3s ease;
}

.upload-result {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.preview {
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	/* 以下属性确保图片居中显示 */
	display: block;
	margin: 0 auto;
	/* 保持宽高比 */
	object-fit: contain;
}