Untitled

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
	div {
		background: #AACCEE;
		border: solid 1px #336699;
		margin: 10px;
		padding: 5px;
		border-radius: 5px;
		display: inline-block;
		text-align: center
	}
	canvas {
		cursor: pointer;
	}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
	document.ondragenter = function(e){e.preventDefault();}
	document.ondragover = function(e){e.preventDefault();}
	$('#canvas')[0].addEventListener('dragenter', function(e){
		e.preventDefault();
		e.effectAllowed = 'move';
	},false);
	$('#canvas')[0].addEventListener('dragover', function(e){
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
	},false);
	$('#canvas')[0].addEventListener('drop', function(e){
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		if(e.dataTransfer.types && e.dataTransfer.types.length>0) {
			var isFile = false;
			for(var i=0; i<e.dataTransfer.types.length; i++) {
				if(e.dataTransfer.types[i] === 'Files' && e.dataTransfer.files.length>0) isFile = true;
			}
			for(var i=0; i<e.dataTransfer.types.length; i++) {
				if(e.dataTransfer.types[i]==='Files') {
				if(e.dataTransfer.files.length>0) {
					for(var j=0; j<e.dataTransfer.files.length; j++) {
						switch(e.dataTransfer.files[j].type) {
							case 'image/jpeg':
							case 'image/gif':
							case 'image/png':
							case 'image/bmp':
								(function(blob){
									var fileReader = new FileReader();
									fileReader.onload = function() {
										var img = document.createElement('img');

										img.src = this.result;
										setTimeout(function(){
											var ctx = $('#canvas')[0].getContext('2d');
											ctx.drawImage(img, 0, 0);
										},100);
									};
									fileReader.readAsDataURL(blob);
								})(e.dataTransfer.files[j]);
								break;
								default:
								alert('Only image file allowed.\nIncluding: jpeg, png, gif and bmp.');
								break;
						}
					}
				}
			}
		}
	}
},false);
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="640" height="480"></canvas></div>
</body>
</html>