js拖动（一个完整的案例呈现）

代码语言：javascript复制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0px;margin:0px;}
		#div1
		{
			width: 200px;
			height: 200px;
			background: red;position: absolute;
			left: 50%;top: 50%;margin: -100px 0 0 -100px;
		}
		#div2
		{
			position: absolute;
			bottom: 0;height: 60px;
			background: -moz-linear-gradient(left,red,green);
			width: 0%;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div>
		<span>文件名:<span id="textName"></span></span><br>
		<span>大小:<span id="textSize"></span></span>
	</div>
	<adiv id="div2"></adiv>
	<script type="text/javascript">
		div1.ondragenter=function()
		{
			document.body.style.background="yellow";
		};
		div1.ondragleave=function()
		{
			document.body.style.background="white";
		};
		//以上拖动文件到div1中发生的颜色问题.
		var a=0;
		div1.ondragover=function()//拖动文件到目标时触发.
		{
			a  ;
			document.title=a;
			return false;
		}
		//以上是title哪里的累加事情.
		div1.ondrop=function(e)//拖动文件到目标时触发.
		{
			var oFile=e.dataTransfer.files[0];
			textName.innerHTML=oFile.name;
			textSize.innerHTML=oFile.size;
			var reader=new FileReader();
			reader.readAsBinaryString(oFile);
			reader.onprogress=function(e)
			{
				div2.style.width=parseInt(e.loaded/e.total*100) "%";
				if(e.loaded==e.total)
				{
					alert("恭喜你.上传成功了");
					div2.style.width=0;
				}
			}
			return false;
		}
	</script>
</body>
</html>

第一部分: