zoukankan      html  css  js  c++  java
  • h5-20-文件操作-拖放文件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#dropbox {
    				 300px;
    				height: 300px;
    				background: #ffffff;
    				border:5px dashed #FF0000;
    				text-align: center;
    				line-height: 300px;
    			}			
    		</style>
    	</head>
    	<body>
    		<div id="dropbox">
    			请把文件拖放到此区域
    		</div>
    		<div id="div1">
    			<!--显示文件的信息-->
    		</div>
    		
    		<script>
    			//获得dom对象
    			var dropbox = document.getElementById('dropbox');
    			var div1 = document.getElementById('div1');
    			
    			//拖动进入
    			dropbox.ondragenter = function(e) {
    				console.log('dropbox dragenter');
    				e.preventDefault();
    				e.stopPropagation();
    				//区域高亮
    				this.style.background = 'yellow';
    			}
    			
    			//拖动离开
    			dropbox.ondragleave = function(e) {
    				console.log('dropbox dragleave');
    				e.preventDefault();
    				e.stopPropagation();
    				//区域失去高亮
    				this.style.background = 'white';
    			}
    			
    			//拖动悬停
    			dropbox.ondragover = function(e) {
    				console.log('dropbox dragover');
    				e.preventDefault();
    				e.stopPropagation();
    			}
    			
    			//释放元素
    			dropbox.ondrop = function(e) {
    				console.log('dropbox drop');
    				e.preventDefault();
    				e.stopPropagation();
    				
    				//从e.dataTransfer对象中获得文件列表对象
    				var files = e.dataTransfer.files;
    								
    				var html = [];
    				
    				//遍历文件列表
    				for (var i = 0;i < files.length;i ++) {
    					//获得当前文件对象
    					var f = files[i];
    					//读取文件信息拼接字符串放到数组中
    					html.push('<p>' + f.name + ',' + (f.type||'未知类型') + ',' + f.size + '字节</p>');
    				}
    				
    				//在div1中显示文件信息
    				div1.innerHTML = html.join('');				
    			}
    		</script>
    	</body>
    </html>
    

      

  • 相关阅读:
    linux开机自启动服务优化设置命令
    yum网络源配置
    CentOS 6一键系统优化 Shell 脚本
    linux系统下find删除目录下除一文件外的所有文件
    linux系统时间同步
    Memcached 查询stats及各项状态解释
    VMWARE 12安装Tools
    win8及以上2012 R2,virtualbox 5.0.20安装centOS6以上各种注意事项
    HTTP的上传文件实例分析
    java中类加载顺序(深入Java)
  • 原文地址:https://www.cnblogs.com/1020182600HENG/p/7283845.html
Copyright © 2011-2022 走看看