美文网首页JavaScript学习笔记
使用HTML5的拖放功能实现将本地的图片的拖放到网上上

使用HTML5的拖放功能实现将本地的图片的拖放到网上上

作者: 小人物的秘密花园 | 来源:发表于2018-04-25 13:40 被阅读4次

原文地址

https://github.com/visugar/FrontEnd-examples/blob/master/08H5%E6%8B%96%E6%94%BEAPI/drag02.html

代码

HTML

<h3>将图片拖入下面内容框中</h3>
    <hr>
    <div class="img-box">
        <div class="content" id="content"></div>
        <span class="btn" id="upload" onclick="upload()">上传图片</span>
    </div>

CSS

.img-box {
    min-width: 500px;
    min-height: 500px;
}

.img-box .content {
    width: 100%;
    min-height: 450px;
    border: 1px dotted orangered;
    border-radius: 5px;
}

.img-box .btn {
    display: block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: orangered;
    border-radius: 3px;
    color: #fff;
    margin: 5px 0;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    box-shadow: 0 0 2px orange;
    cursor: pointer;
}

JS

window.onload = function() {
    var content = document.getElementById("content");
    // 阻止document对象的默认事件
    document.ondragover = function(e) {
        e.preventDefault();
    };
    // 阻止照片在新窗口中打开
    document.ondrop = function(e) {
        e.preventDefault();
    }
    content.ondragover = function(e) {
        e.preventDefault();
    }
    content.ondrop = function(e) {
        // 获取图片路径
        var imgsFile = e.dataTransfer.files[0];
        //创建一个fileReader对象的实例
        var fs = new FileReader();
        fs.readAsDataURL(imgsFile);
        // 当图片资源加载完成后,将图片显示在content中
        fs.onload = function(e) {
            // 创建图片实例
            var img = new Image();
            img.src = fs.result;
            content.appendChild(img);
        }
    }
};

function upload() {
    var aImg = document.getElementsByTagName('img') || [];
    if (aImg.length <= 0) {
        alert('请将图片拖入内容区!')
    } else {
        for (var i = 0; i < aImg.length; i++) {
            console.log(aImg[i].getAttribute("src"));
        }
    }

}

结果

image.png

相关文章

  • 使用HTML5的拖放功能实现将本地的图片的拖放到网上上

    原文地址 https://github.com/visugar/FrontEnd-examples/blob/ma...

  • HTML5 拖放笔记

    HTML5拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖...

  • HTML5拖放

    1、HTML5 拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖...

  • HTML5拖放API附带示例

    拖放(Drag 和 drop)是HTML5标准的组成部分 拖放 拖放是一种常见的特性,即抓取对象以后拖放到其他位置...

  • HTML5中的图片拖放

    拖放函数: 1.HTML5拖放 Drag拖和drop放是HTML5标准的组成成分 2.拖放开始: ondragst...

  • HTML5 拖放

    本节我们学习 HTML5 中的拖放,拖放是一种常见的特性,也就是抓取对象以后拖到另一个位置。在 HTML5 中,拖...

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

  • 【2016.7.30】ps的一些小技巧(未完)

    创建/剪切释放蒙板 快捷键ctrl+alt+g 目的:把想要的图片直接放入一个形状工具中 把图片拖放到矩形上,使用...

  • 拖放

    内容整理自网上! 一、拖放 实现效果: 代码: 二、拖放本地资源 代码:

  • java传输本地图片到Android

    实现将本地存储的图片发送到后台 使用springMVC框架,获取本地图片,转换成流输出 Android代码 请求地...

网友评论

    本文标题:使用HTML5的拖放功能实现将本地的图片的拖放到网上上

    本文链接:https://www.haomeiwen.com/subject/dxzelftx.html