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>