功能--实现文件拖拽上传

HTML代码

<div id="upload">
	<input type="file" id="fileInput" />
	<img src="./upload.png" style="height: 50px;width: 50px;">
	<div>点击/拖拽文件</div>
</div>

js代码

const upload = document.getElementById('upload');
const fileInput = document.getElementById('fileInput')
upload.addEventListener('click',function(){
	fileInput.click()
})
fileInput.addEventListener('change',function(){
	const file = fileInput.files[0];
	console.log(file);
    //上传函数
})
//目标元素 拖放元素进入目标元素时
upload.addEventListener('dragenter',function(e){
	e.preventDefault();
})
//目标元素 拖放元素在目标元素上离开
upload.addEventListener('dragover',function(e){
	e.preventDefault();
})
//目标元素 被拖放的元素在目标元素上同时鼠标放开触发的事件
upload.addEventListener('drop',function(e){
	e.preventDefault();
	const file = e.dataTransfer.files[0];
	console.log(file);
    //上传函数
})

拖放API基础

drag：被拖放元素 在拖拽的过程中触发
dragend 被拖放元素 拖拽完成时
dragenter 目标元素 拖放元素进入目标元素时
dragover 目标元素 拖放元素在目标元素上时
dragleave 目标元素 拖放元素在目标元素上离开
drop 目标元素 被拖放的元素在目标元素上同时鼠标放开触发的事件
注：需要阻止dragover的默认行为才会触发drop事件

css样式

input{
	display: none;
}
#upload{
	width: 200px;
	height: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px red solid;
}