图片在浏览器局部拖放

最新推荐文章于 2021-06-04 07:51:49 发布

LygTom

最新推荐文章于 2021-06-04 07:51:49 发布

阅读量246

点赞数

分类专栏：拖放

本文链接：https://blog.csdn.net/LygTom/article/details/77725962

版权

拖放专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习了拖放之后大家有没有想在浏览器局部显示图片？制作一个照片墙呢？

下面是一些实例代码。

<body>
  <div id="imgContainer"></div>
<div id="info"></div>
</body>
<script>
    var imgContiner = document.getElementById("imgContainer");
    imgContiner.ondragover = function(event){
        event.preventDefault();
    };
    imgContiner.ondrop = function(event){
        event.preventDefault();
       /* infoShow(event.dataTransfer.files[0]);*/
        var file = event.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.readAsDataURL(file);
        fileReader.onload = function(e){
       /*     infoShow(fileReader);*/
            imgContiner.innerHTML = "<img src='"+fileReader.result+"'>";
        };
    };
    // 如果for in 遍历的是
    function infoShow(obj){
        var allInfo = "";
     for(var key in obj){
         allInfo += key+":"+obj[key]+"<br>"
     }
        var info = document.getElementById("info");
        info.innerHTML = allInfo;
    }
</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LygTom

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片在浏览器局部拖放

学习了拖放之后大家有没有想在浏览器局部显示图片？制作一个照片墙呢？下面是一些实例代码。 id="imgContainer">id="info"> var imgContiner = document.getElementById("imgContainer"); imgContiner.ondragover = function(event){
复制链接

扫一扫