fxxkscript · November 7, 2012 14:38
diff --git a/drag.html b/drag.html
 <!DOCTYPE HTML>
 <html>
 <head>
 	<meta charset="UTF-8">
 	<title>HTML5 Drag and Drop</title>
 	<style>
 	body {
 		background-color: #515151;
 		width: 100%;
 		height: 100%;
 	}
 	#holder { 
 		display: none;
 		position: absolute;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 	}
 	#shell {
 		border: 10px dashed #ccc; 
 		position: absolute;
 		top: 10%;
 		left: 10%;
 		right: 10%;
 		bottom: 10%;
 	}
 	#shell.hover { 
 		border: 10px dashed #333; 
 	}
 	#tip {
 		position: absolute;
 		top: 50%;
 		left: 0;
 		right: 0;
 		height: 30px;
 		margin-top: -15px;
 		line-height: 30px;
 		color: #999;
 		text-align: center;
 	}
 	.hide {
 		display: none;
 	}
 	</style>
 </head>
 <body>
 <div id="shell">
 	<p id="tip">拖动图片到这里呀亲</p>
 </div>
 <input id="holder" type="file">

 <script>
 var shell = document.getElementById('shell'),
    tip = document.getElementById('tip'),
    holder = document.getElementById('holder'),
    shellWidth = window.getComputedStyle(shell, null).getPropertyValue('width'),
    shellHeight = window.getComputedStyle(shell, null).getPropertyValue('height');

 if (typeof window.FileReader === 'undefined') {
 	holder.style.display = "block";
 	shell.style.display = "none";
 }
 
 shell.addEventListener('dragover', function (e) { 
 	this.className = 'hover'; 
 	e.preventDefault(); 
 }, false);
 shell.addEventListener('dragleave', function(e) {
 	this.className = '';
 	e.preventDefault();
 }, false);
 shell.addEventListener('dragend', function (e) { 
 	this.className = ''; 
 	e.preventDefault();
 }, false);
 shell.addEventListener('drop', function (e) {
  	this.className = '';
  	e.preventDefault();

  	var file = e.dataTransfer.files[0],
      	reader = new FileReader();
  	reader.onload = function (event) {
    	shell.style.background = 'url(' + event.target.result + ') no-repeat center transparent padding-box';
    	shell.style.backgroundSize = shellWidth + ' ' + shellHeight;
    	tip.style.display = 'none';
  	};
  	reader.readAsDataURL(file);

 }, false);
 holder.addEventListener('change', function() {

 },false);
 </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>HTML5 Drag and Drop</title>
	<style>
	body {
	background-color: #515151;
	width: 100%;
	height: 100%;
	}
	#holder {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}
	#shell {
	border: 10px dashed #ccc;
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	bottom: 10%;
	}
	#shell.hover {
	border: 10px dashed #333;
	}
	#tip {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 30px;
	margin-top: -15px;
	line-height: 30px;
	color: #999;
	text-align: center;
	}
	.hide {
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="shell">
	<p id="tip">拖动图片到这里呀亲</p>
	</div>
	<input id="holder" type="file">

	<script>
	var shell = document.getElementById('shell'),
	tip = document.getElementById('tip'),
	holder = document.getElementById('holder'),
	shellWidth = window.getComputedStyle(shell, null).getPropertyValue('width'),
	shellHeight = window.getComputedStyle(shell, null).getPropertyValue('height');

	if (typeof window.FileReader === 'undefined') {
	holder.style.display = "block";
	shell.style.display = "none";
	}

	shell.addEventListener('dragover', function (e) {
	this.className = 'hover';
	e.preventDefault();
	}, false);
	shell.addEventListener('dragleave', function(e) {
	this.className = '';
	e.preventDefault();
	}, false);
	shell.addEventListener('dragend', function (e) {
	this.className = '';
	e.preventDefault();
	}, false);
	shell.addEventListener('drop', function (e) {
	this.className = '';
	e.preventDefault();

	var file = e.dataTransfer.files[0],
	reader = new FileReader();
	reader.onload = function (event) {
	shell.style.background = 'url(' + event.target.result + ') no-repeat center transparent padding-box';
	shell.style.backgroundSize = shellWidth + ' ' + shellHeight;
	tip.style.display = 'none';
	};
	reader.readAsDataURL(file);

	}, false);
	holder.addEventListener('change', function() {

	},false);
	</script>
	</body>
	</html>