<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ 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>