<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/public.css"/>
<style type="text/css">
#box{width: 200px;height: 200px;background: black;margin: 200px;}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("box");
var oUl=document.getElementById("ul");
oDiv.ondragenter=function(){
this.style.background="red";
}
oDiv.ondragover=function(ev){
var ev=ev || window.event;
ev.preventDefault();
}
oDiv.ondragleave=function(){
this.style.background="black";
}
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){ //文件列表的type属性
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('请上传图片');
}
}
}
}
</script>
</head>
<body>
<div id="box"></div>
<ul id="ul"></ul>
</body>
</html>
