您的位置：首页 > Web前端 > HTML5

HTML5拖放本地资源

2015-07-20 16:43 507 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5拖放本地资源</title>
</head>
<script type="text/javascript">
var imgcontainer,msgDiv;
window.onload=function(){
imgcontainer=document.getElementById("imgcontainer");
msgDiv=document.getElementById("msg");

imgcontainer.ondragover=function(e){
e.preventDefault();
}

imgcontainer.ondrop=function(e){
e.preventDefault();

var f= e.dataTransfer.files[0];
var fileReader=new FileReader();
fileReader.onload=function(e){
showObj(e.target);
imgcontainer.innerHTML="<img src='"+fileReader.result+"' style='width:100px;height:100px;' />";
}
fileReader.readAsDataURL(f);
}
}
function showObj(obj){
var s="";
for(var k in obj){
s+=k+":"+obj[k]+"<br/>";
}
msgDiv.innerHTML=s;
}
</script>
<style type="text/css">
#imgcontainer{
width: 500px;
height: 500px;
background-color: antiquewhite;
}
</style>
<body>
<div id="imgcontainer"></div>
<div id="msg"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航