javascript拖拽之从浏览器外拖拽（drag）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5拖放API之图片相框效果</title>
		<!-- <link rel="stylesheet" href="css/photoframe.css"> -->
		<style type="text/css">
			#container {
				margin: 30px auto;
				width: 900px;
				height: 500px;
				border: black 4px solid;
			}

			img {
				margin-top: 40px;
				width: 135px;
				height: 105px;
			}

			div.photoframe {
				text-align: center;
				float: left;
				width: 200px;
				height: 250px;
				margin: 10px;
				background: url(image/photoframe.jpg) no-repeat;
				background-size: 100%;
			}

			p {
				text-align: center;
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<h3>HTML5拖放API之图片相框效果</h3>
		<hr />
		<h4>往方框内拖放图片</h4>
		<div id="container">

			<div class="photoframe">
				<img src="image/star.jpg">
				<p>1.PNG (image/png)<br>
					大小：9769字节<br>
					修改时间：2019/8/9 <br>下午11:41:02</p>
			</div>

			<script type="text/javascript">
				var container = document.getElementById("container");
				//解禁当前元素为可放置被拖拽元素的区域
				container.ondragover = function(ev) {
					// var ev=ev||window.event;
					ev.preventDefault();
				}
				container.ondrop = function(e) {
					//解禁当前元素为可放置被拖拽元素的区域
					e.preventDefault();
					//获取从本地拖拽的文件对象数组
					var file = e.dataTransfer.files;
					//使用for循环遍历同时被拖拽并放置到指定区域的所有文件
					for (var i = 0, f; f = file[i++];) {
						//获取图片地址
						var imgURL = window.URL.createObjectURL(f);
						//webkitURL有兼容问题
						//URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL
						//个人理解为创建一个由对象中的链接组成的字符串
						var img = document.createElement("img");
						img.src = imgURL; //<img src="blob:http://127.0.0.1:8848/57da07eb-e225-4a85-b034-b2c5746a347e">
						//创建一个相框,并将图片<img>放入,相框样式为photoframe
						var photoframe = document.createElement("div")
						photoframe.className = "photoframe";
						photoframe.appendChild(img);
						//放入图片
						container.appendChild(photoframe);

						//上方其实已经完成了拖放项目
						//状态
						var status = document.createElement("p");
						//获得最后改进后的时间
						var lastModifiedDate=f.lastModifiedDate;//Sat Aug 10 2019 23:34:32 GMT+0800 (中国标准时间)
						var date=lastModifiedDate.toLocaleDateString();	//2019/8/10
						var time=lastModifiedDate.toLocaleTimeString();//下午11:34:32
						
						
						//var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
						//N/A是not applicable的缩写,中文的含义是不适合的,未设置的意思
						//toDateString也有,不加local的话还是得不到想要的样式
						
						
						 status.innerHTML = f.name+"("+f.type+")"+"<br>大小:"+f.size+"字节<br>修改时间："+date+"<br>"+time;
						photoframe.appendChild(status);
												
						console.log(f) //对象数组
						// File {name: "1.PNG", lastModified: 1565365262558, lastModifiedDate: Fri Aug 09 2019 23:41:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 9769, …}
						// lastModified: 1565365262558
						// lastModifiedDate: Fri Aug 09 2019 23:41:02 GMT+0800 (中国标准时间) {}
						// name: "1.PNG"
						// size: 9769
						// type: "image/png"
						// webkitRelativePath: ""
						// __proto__: File
						console.log(imgURL) //对象数组中的url,其他同理
						console.log(date) //对象数组中的url,其他同理
						console.log(time) //对象数组中的url,其他同理
			
					}
				}
			</script>
			
	</body>
</html>
<!-- 
 1.源对象不设置ondragatart，在目标对象设置两个事件ondragover、drop
 2.ondragover解禁当前元素为可放置被拖拽元素的区域，即清除默认事件
 3.drop
	3.1解禁当前元素为可放置被拖拽元素的区域，即清除默认事件
	3.2只显示一个图片（可不设）即将图图片显示区域清空 <div id="output"></div>
	3.3获取从本地拖拽放置的文件对象数组var files = e.dataTransfer.files;
		(相当于.ondragstart 中设置var id = ev.dataTransfer.getData("text");取得拖拽数据)
4.使用for循环遍历同时被拖拽并放置到指定区域的所有文件 for (var i = 0,f; f = files[i]; i++) 
    4.1 获取当前图片文件的URL来源(源对象)
        var imgURL = window.webkitURL.createObjectURL(f); 							
	4,2，创建img及其属性，以将图片显示出来（<img src width heigth>）
	4,3,创建源对象背景（即相框） 
 -->
posted @ 2022-04-02 09:48  coderwcb  阅读(146)  评论(0)  编辑  收藏  举报