ajax拖拽预览

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

CSS

div{
　　width: 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;
	};