如图是接受文件拖拽的窗口
拖入一张图片之后如下图,拖入的图片作为了方框的背景图片
再拖入一张图片
则原来的图片被覆盖。
代码实现
使用了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>