<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{
width:320px;
height:50px;
background:pink;}
</style>
<script> window.onload = function ()
{
var odiv = document.getElementById('div1');
var oul = document.getElementById('ul1'); odiv.ondragenter = function ()
{
odiv.innerHTML = '请释放';
} odiv.ondragover = function (ev)
{
ev.preventDefault();
} odiv.ondrop = function (ev)
{
ev.preventDefault(); var fs = ev.dataTransfer.files; for(var i = 0; i < fs.length; i++)
{ if(fs[i].type.indexOf('image')!=-1)
{
var fd = new FileReader();
fd.readAsDataURL(fs[i]); fd.onload = function ()
{
var oli = document.createElement('li');
var oimg = document.createElement('img'); oimg.src = this.result; oli.appendChild(oimg);
oul.appendChild(oli);
}
} else
{
alert('图片样式·')
} }
} odiv.ondragleave = function ()
{
odiv.innerHTML = '请拖拽到此区域';
} }
</script>
</head> <body> <div id="div1">请拖拽到此区域</div> <ul id="ul1"></ul>
</body>
</html>