zoukankan      html  css  js  c++  java
  • ajax拖拽预览

    <div id="div1"></div>
    

    CSS

    div{
       300px;
      height: 300px;
      border: 5px solid black;
    }
    

    JS

    	/*
    		draggable="true"
    		代表可以拖拽。
    			
    		ondragenter 拖入元素时触发。
    		ondragover 拖拽在该元素上移动时触发。
    		ondragleave 拖出元素时触发。
    		ondrop  拖拽元素松开的时候。
    	*/
    	var div1 = document.getElementById('div1');
    	div1.ondragenter = function(){
    		console.log('拖入元素');
    		return false;
    	};
    	div1.ondragover = function(){
    		console.log('拖入移动元素');
    		return false;
    	};
    	div1.ondragleave = function(){
    		console.log('离开');
    	};
    	div1.ondrop = function(ev){
    		console.log('松开');
    		//console.log(ev.dataTransfer.files);
    		
    		var files = ev.dataTransfer.files;
    
    		for(var i=0;i<files.length;i++){
    			var fr = new FileReader();
    			if(files[i].type.indexOf('image')!=-1){
    				//做图片操作;
    				fr.onload = function(){
    					var img = new Image();
    
    					img.src = this.result;
    					document.body.appendChild(img);
    				};
    				fr.readAsDataURL(files[i]);
    			}else if(files[i].type.indexOf('text')!=-1){
    				//打印文本
    				fr.onload = function(){
    					console.log(this.result);
    				};
    				fr.readAsText(files[i],'UTF-8');
    			}
    			var fd = new FormData();
    			fd.append('file',files[i]);
    			//
    			var xhr = new XMLHttpRequest();
    			xhr.open('post','getList.php',true);
    			xhr.send(fd);
    		}
    		return false;
    	};
    

      

     

  • 相关阅读:
    python_深浅拷贝
    Python_三级菜单
    python 字符串
    python_字典
    初识Python
    C# ADO.NET面向对象想法
    C# ADO.NET
    C# ADO.NET 面向对象
    C# 数据库连接增删改查
    C# 面向对象多态的抽象性&接口 object&is as类型转换运算符
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8252364.html
Copyright © 2011-2022 走看看