使用本地图片文件的拖拽

最新推荐文章于 2022-05-19 13:01:36 发布

原创最新推荐文章于 2022-05-19 13:01:36 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#图片拖拽 #html5

前端专栏收录该内容

72 篇文章

订阅专栏

在从本地上传图片的时候，如果使用拖拽效果，想想应该是更加的高大上，下面直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#dropBox{
			width: 300px;
			height: 300px;
			border:1px solid red;
			font-size: 40px;
			text-align: center;
			background: lightyellow;
			background-repeat: no-repeat;
			background-size: 100%;
		}
		#dropBox div{
			margin:50px auto;
			width: 140px;
		}
	</style>
</head>
<body>
	<div id="dropBox">
		<div>拖动你的图片到这里</div>
	</div>
	<script type="text/javascript">
		var dropBox;
		window.onload=function(){
			dropBox = document.getElementById("dropBox");
			// 鼠标进入放置区时
			dropBox.ondragenter = ignoreDrag;
			// 拖动文件的鼠标指针位置放置区之上时发生
			dropBox.ondragover = ignoreDrag;
			dropBox.ondrop = drop;
		}
		function ignoreDrag(e){
			// 确保其他元素不会取得该事件
			e.stopPropagation();
			e.preventDefault();
		}
		function drop(e){
			e.stopPropagation();
			e.preventDefault();

			// 取得拖放进来的文件
			var data = e.dataTransfer;
			var files = data.files;
			// 将其传给真正的处理文件的函数
			
			var file = files[0];
			var reader = new FileReader();
			reader.onload=function(e){
				dropBox.style.backgroundImage = "url('"+e.target.result+"')";
			}
			reader.readAsDataURL(file);
		}
	</script>
</body>
</html>