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

HTML5 拖放_2

2016-07-04 16:55 435 查看
拖放本地资源

Index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>拖放</title>
<script src="app1.js"></script>
<style>
#imgcontainer{
width: 400px;
height: 400px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="imgcontainer"></div>
<div id="msg"></div>
</body>
</html>


app1.js

/**
* Created by lenovo on 2016/7/4.
*/
var msgdiv,imgcontainer;

window.onload=function(){
msgdiv=document.getElementById("msg");
imgcontainer=document.getElementById("imgcontainer");

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){
imgcontainer.innerHTML="<img src=\""+fileReader.result+"\">";
}
fileReader.readAsDataURL(f);
}

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 拖放
相关文章推荐
新的分享
章节导航