HTML5 拖放_2

最新推荐文章于 2024-07-19 23:42:48 发布

AndyJson

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量237

点赞数 1

分类专栏： HTML5 文章标签： html5 拖放

本文链接：https://blog.csdn.net/AndyJson/article/details/51822102

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

拖放本地资源

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);
    }


}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

AndyJson

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 拖放_2

拖放本地资源Index.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>拖放</title> <script src="app1.js"></script> <style> #imgcontainer{ width: 400px;
复制链接

扫一扫