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

今天药忘吃喽~ 2021-11-01 05:40 589阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>HTML5拖放API之图片相框效果</title>
    		
    		<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: /images/20211101/f06a8c75c8bc424e846abe23cd96429c.png