cxytomo/drag.html

## 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>