本地文件操作--拖拽图片

<canvas id="canvas"></canvas>
<div id="holder" class="normal">Drop your bitmap here</div>
<script type="text/javascript">
var holder = document.getElementById('holder');
var canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
/*
if (window.File && window.FileReader && window.FileList && window.Blob) {
		alert("支持！");
} else {
    alert('HTML5 File API在您的浏览器里是不完全支持的。');
}*/
holder.ondragover = function() {
		this.className = 'hover';
		return false; //屏蔽默认的拖放处理
};
holder.ondragend = function() {
		this.className = 'normal';
		return false;
};
holder.ondrop = function(e) {
		this.className = 'normal';
		e.preventDefault();
		var file = e.dataTransfer.files[0]; //获取到所拖拽的第一个文件
		reader = new FileReader(); //创建一个FileReader对象
		reader.onload = function(event) { //当本地文件读取完毕后调用以下函数
				img = new Image(); //创建一个Image对象
				img.src = event.target.result; //将读取的二进制位图数据赋予该对象
				img.onload = function() { 
						ctx.clearRect(0, 0, canvas.width, canvas.height); //清除Canvas中已有的内容
						ctx.drawImage(this, 0, 0, canvas.width, canvas.height); //将Image对象显示在Canvas中
						delete this; //删除Image对象，以释放缓存
				}
		};
		reader.readAsDataURL(file); //在FileReader对象中读取文件内容
		return false;
};
</script>