HTM5 实现文件拖拽
如图是接受文件拖拽的窗口
拖入一张图片之后如下图，拖入的图片作为了方框的背景图片
再拖入一张图片
则原来的图片被覆盖。
代码实现
使用了HTML5的File API和drag && drop API
<style> #box { /* 容器基本样式 */ border: 2px gray dotted; width: 300px; height: 300px; } #box.hover { /* 鼠标拖拽到容器上时的样式 */ border:10px olive solid; } #box.filled { /* 图片放置后的容器样式 */ border:10px blue dashed; }</style><div id="box"></div><script>var box = document.getElementById('box');if (typeof window.FileReader === 'undefined'){ alert('not support file api');}box.ondragover = function (){ this.className = "hover"; return false;};box.ondragend = function (){ this.className = ""; return false;}box.ondrop = function (e){ this.className = 'filled'; console.log(e); e.preventDefault(); var file = e.dataTransfer.files[0]; console.log(file); reader = new FileReader(); reader.onload = function (event){box.style.background = 'url(' + event.target.result + ') no-repeat center';}reader.onerror = function (event){console.log(reader);}reader.readAsDataURL(file);return false;}</script>