效果图如下：

注意：

1. 由于动态图片较大可能需要一些时间进行加载；
2. 受gif格式限制，效果图颜色可能是真，清晰度下降属正常现象。

原理简述：

在html5标准下，将文件拖拽入页面时，会产生一系列的拖拽相关的事件，我们首先第一步应阻止事件冒泡（dom1、dom2方式返回false）防止页面跳转，然后再在drop事件（ondrop）中进行处理：通过事件对象获取文件（数组 因为可能是多个文件，也可能不是拖拽的文件）ev.dataTransfer.files，再通过浏览器的FormData对象及xhr对象实现上传，至于服务器端的判断就简单了，应该不用多说吧

本站当前代码（后续会进一步优化）

	dropbox=$("#body");
	document.addEventListener("dragenter", function(e){  
		dropbox.style.borderColor = 'gray';
		dropbox.style.borderColor = 'gray';  
		dropbox.style.backgroundColor = 'white';  
	}, false);  
	document.addEventListener("dragleave", function(e){  
		dropbox.style.borderColor = 'silver';
		dropbox.style.backgroundColor = 'transparent';  
		e.stopPropagation();
		e.preventDefault();
	}, false);
	document.addEventListener("dragover", function(e){  
		e.stopPropagation();
		e.preventDefault();
	}, false);
	document.addEventListener("drop", function(e){  
		e.stopPropagation();  
		e.preventDefault();
		if(e.dataTransfer.files.length==0) return;
		if(login_lock()) return;
		var fd = new FormData();
		fd.append('FILE', e.dataTransfer.files[0]);
		ajax=$.ajax();
		ajax.page='<?php echo URLROOT;?>p/filelogin';
		ajax.data=fd;
		ajax.setHead=false;
		ajax.callback=function(ajax){
			if(ajax.text=='can') login_ok();
			else{
				myScript.message('登陆失败:',ajax.text,'red');
				login_error();
			}
		}
		ajax.send();
	}, false);