<!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>
