HTML5拖拽图片进行上传，并显示图片大小，名称等

最新推荐文章于 2021-06-09 10:38:00 发布

隔山隔海syx

最新推荐文章于 2021-06-09 10:38:00 发布

阅读量711

点赞数

本文链接：https://blog.youkuaiyun.com/qq_45844648/article/details/105428588

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽文件上传文件demo</title>
		<style>
			#drop_area{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="drop_area" draggable="true">
			<div id="txt">请将文件拖拽到此处，并且图片大小不能大于500k</div>
			<div id="preview"></div>
		</div>
		<input type="button" id="button" value="上传"/>
	</body>
	<script>
		var box=document.getElementById('drop_area');
		var button=document.getElementById('button');
		// 阻止默认
		box.addEventListener("dragover",function(e){
			e.preventDefault();
		})
		box.addEventListener("drop",function(e){
			e.preventDefault();
			// 获取文件对象
			var filelist=e.dataTransfer.files;
			// 如果文件为0，也就是没有 ，就上传不成功
			if(filelist.length==0){
				return false;
			}
			// 检测是不是图片类型indexof('')用来检测,因为有类型，用===
			if(filelist[0].type.indexOf('image')===-1){
				alert("您选择的不是图片");
				return false;
			}
			document.getElementById('txt').style.display="none";
			document.getElementById('preview').style.display="block";
			// 实现图片预览功能 通过传过来的对象创建
			var img=window.webkitURL.createObjectURL(filelist[0]);
			var filename=filelist[0].name;
			var filesize=Math.floor(filelist[0].size/1024);
			// 判断文件大小
			if(filesize>500){
				alert("上传的图片大小不能超过500k");
				return false;
			}
			// 显示图片信息
			var image=document.createElement('img');
			image.src=img;
			// 创建一个段落
			var p=document.createElement('p');
			p.innerHTML="图片名称："+filename+"<br /> 图片大小："+filesize+"kb";
			// 显示在preview里面
			document.getElementById('preview').appendChild(image);
			document.getElementById('preview').appendChild(p);
		})
		
		
	</script>
</html>