<!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()
{
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)
{
var oFile=e.dataTransfer.files[0];
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)
{
var oFile=e.dataTransfer.files[0];
textName.innerHTML=oFile.name;
textSize.innerHTML=oFile.size;
var reader=new FileReader();
reader.readAsBinaryString(oFile);
return false;
}
</script>
</body>
</html>