<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
div1.ondragenter = function(){
document.body.style.background='yellow';
};
div1.ondragleave = function(){
document.body.style.background='white';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
div1.ondragenter = function(){
document.body.style.background='yellow';
};
div1.ondragleave = function(){
document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
a++;
document.title=a;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div id='div1'></div>
<script type="text/javascript">
div1.ondragenter = function(){
document.body.style.background='yellow';
};
div1.ondragleave = function(){
document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
a++;
document.title=a;
}
div1.ondrop=function()//拖动元素放到div中启动事件
{
alert(1);
return false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div id='div1'></div>
<div>
<span>文件名:<span id="textName"></span></span><br>
<span>大小:<span id="textSize"></span></span>
</div>
<script type="text/javascript">
div1.ondragenter = function(){
document.body.style.background='yellow';
};
div1.ondragleave = function(){
document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
a++;
document.title=a;
return false;
}
div1.ondrop=function(e)//拖动元素放到div中启动事件
{
var oFile=e.dataTransfer.files[0];//e.dataTransfer通谷一点讲,就是可以通过它来传输被拖动的数据,以便在拖拽结束的时候,对数据进行其他的操作。
textName.innerHTML=oFile.name;
textSize.innerHTML=oFile.size;
return false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#div1{
width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;
margin: -100px 0 0 -100px;
}
</style>
</head>
<body>
<div id='div1'></div>
<div>
<span>文件名:<span id="textName"></span></span><br>
<span>大小:<span id="textSize"></span></span>
</div>
<script type="text/javascript">
div1.ondragenter = function(){
document.body.style.background='yellow';
};
div1.ondragleave = function(){
document.body.style.background='white';
}
var a=0;
div1.ondragover=function()//进入的事件.
{
a++;
document.title=a;
return false;
}
div1.ondrop=function(e)//拖动元素放到div中启动事件
{
var oFile=e.dataTransfer.files[0];//e.dataTransfer通谷一点讲,就是可以通过它来传输被拖动的数据,以便在拖拽结束的时候,对数据进行其他的操作。
textName.innerHTML=oFile.name;
textSize.innerHTML=oFile.size;
var reader=new FileReader();
reader.readAsBinaryString(oFile);//转换为二进制
return false;
}
</script>
</body>
</html>