var box = document.getElementById("box");
var dusTbin = document.getElementById("dustbin");
var span = box.getElementsByTagName("span")[0];
//目标元素事件
var img = '';
box.ondragenter = function(){//进入目标元素触发
	span.style.display = "block";
}
box.ondragover = function(ev){//在目标元素上连续触发
	var ev = ev||window.event;
	ev.preventDefault();//阻止默认事件
	span.style.display = "block";
}
box.ondragleave = function(){//离开目标元素
	span.style.display = "none";
}
box.ondrop = function(ev){//在目标元素上面释放鼠标触发
	//alert("拖拽结束！！");
	var ev = ev||window.event;
	ev.preventDefault();//阻止默认事件
	span.style.display = "none";
	var file = ev.dataTransfer.files;
	//alert(file[0].type);
	for (var i=0; i<file.length ;i++ )
	{
		if (file[i].type.indexOf("image")!=-1)
		{
			var read = new FileReader();//新建一个读取文件对象
			read.readAsDataURL(file[i]);//读取文件
			read.onload = function(){//读取文件成功之后调用什么函数
				var img = document.createElement("img");
				//alert(this.result);
				img.src = this.result;
				box.appendChild(img);
				//获取img节点 实现删除功能
				var oImg = document.getElementsByTagName("img");
				if (oImg)
				{
					for (var j=0;j<oImg.length ;j++ )
					{
						oImg[j].ondragstart = function(ev){
							ev.dataTransfer.setData("data",ev.target.innerHTML);
							img = ev.target;
						}
						oImg[j].ondragend = function(ev){
							ev.dataTransfer.clearData("data");//清楚数据
							img = null;
						}
					}

				}
				//实现删除功能(移除img节点)
				dusTbin.ondragover = function(ev){
					ev.preventDefault();
				}
				dusTbin.ondrop = function(){
					if (img)
					{
						img.parentNode.removeChild(img);
					}
				}
			}
		}else{
			alert("请上传图片！");
		}
		
	}
	
}