【4858美高梅】一步步用HTML伍初叶写个图片拖拽上传预览组件,HTML伍拖放操作

By admin in 4858美高梅 on 2019年4月3日

HTML5拖放

拖放(DragDrop)是 HTML5
标准的组成都部队分。拖放顾名思义正是把二个对象抓取放到另2个职责。在HTML5中,任何因素都帮助拖放。

端详参见:一步步用HTML五先导写个图片上传预览组件
H5中拖拽事件有:
[ – ] DragDrop:拖放完结,也正是鼠标拖入对象并在拖放区域释放。
[ – ] DragEnter :拖放进入,相当于鼠标拖放对象进入拖放区域。
[【4858美高梅】一步步用HTML伍初叶写个图片拖拽上传预览组件,HTML伍拖放操作。 – ] DragLeave:离开拖放区域。
[ – ] DragOver
:拖放对象悬浮于拖放区域,在拖放区域内活动时往往触及。

本篇涉及的知识点有

拖放(Drag和drop)是H伍标准的组成都部队分

  • #### 浏览器协理情状

一.拖拽文件获取文件新闻

示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            .example {
                padding: 10px;
                border: 1px solid #ccc;
            }

            #drop_zone {
                border: 2px dashed #bbb;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 25px;
                text-align: center;
                font: 20pt bold 'Vollkorn';
                color: #bbb;
            }
        </style>
    </head>

    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];
                for(var i = 0, f; f = files[i]; i++) {
                    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                        f.size, ' bytes, last modified: ',
                        f.lastModifiedDate.toLocaleDateString(), '</li>');
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }

            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy';
            }

            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);

            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);
            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);
        </script>
    </body> 
</html>
  1. flex布局,参考阮一峰先生的篇章
  2. HTML拖放API
  3. 原生JS控制HTML插入

此地需具有js基础知识及其H伍拖拽部分连锁办法

firefoxopera12ChromeSafari5Microsof
Edge
IE9(IE6~捌是有拖放的api的,可是并未有dataTrasfer对象)。

二.范围文件大小与文件格式

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <style>
            .example {
                padding: 10px;
                border: 1px solid #ccc;
            }

            #drop_zone {
                border: 2px dashed #bbb;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                padding: 25px;
                text-align: center;
                font: 20pt bold 'Vollkorn';
                color: #bbb;
            }
        </style>
    </head>

    <body>
        <div class="example">
            <div id="drop_zone">将文件拖放到此处</div>
            <output id="list"></output>
        </div>
        <script>
            function handleFileSelect(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                var files = evt.dataTransfer.files;//获取文件集
                var output = [];
                for(var i = 0, f; f = files[i]; i++) {
                      if(f.size<1024*1024*2&&(f.type=="image/png"||f.type=="image/jpeg")){//<===这里
                            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                            f.size, ' bytes, last modified: ',
                            f.lastModifiedDate.toLocaleDateString(), '</li>');
                    }
                }
                document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
            }

            function handleDragOver(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
            }

            var dropZone = document.getElementById('drop_zone');
            dropZone.addEventListener('dragover', handleDragOver, false);
            dropZone.addEventListener('drop', handleFileSelect, false);

            //body中阻止 拖拽事件防止拖拽错误
            document.body.addEventListener('dragover', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false;
            }, false);
            document.body.addEventListener('drop', function(evt) {
                evt.stopPropagation(); //阻止默认事件
                evt.preventDefault(); //阻止默认事件
                return false; 
            }, false);
        </script>
    </body> 
</html>

本篇小说采纳H五的拖放API,完结三个简约的控件编辑器,首先用flex布局营造多少个简短的左右分栏界面,代码如下

 

  • #### 开启draggable属性

三.出示缩略图与动态增加和删除效果

示例

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>简易上传预览</title> 
        <style type="text/css">
            #drop_zone {
                display: block;
                border: 2px dashed #BBB;
                padding: 25px 5px;
                text-align: center;
                font-size: 20pt;
                color: #BBB;
                border-radius: 5px;
            }

            #drop_zone.hovering {
                -webkit-box-shadow: inset 0px 0px 50px #BBB;
                -moz-box-shadow: inset 0px 0px 50px #BBB;
                -o-box-shadow: inset 0px 0px 50px #BBB;
                box-shadow: inset 0px 0px 50px #BBB;
            }

            #file-upload-box {
                margin: 40px 25px;
                padding: 10px;
                border: 1px solid #BBB;
            }

            #description:first-line {
                margin-left: 42px;
            }

            #output_area {
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                align-content: space-between;
                position: absolute;
                left: 0;
                right: 0;
                top: 106px;
                overflow: auto;
                bottom: 0;
            }

            #file-upload-box {
                position: absolute;
                top: 45px;
                bottom: 45px;
                left: 20px;
                right: 20px;
                background-color: #fff;
                overflow: auto;
            }

            .upload-img-itme {
                color: #333;
                width: 170px;
                margin: 10px;
                color: #333;
                flex: 1;
            }

            .upload-img-itme a.rimg-name {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 5px;
                display: block;
            }

            .d-image {
                box-shadow: 0 0 10px #bbb;
                border-radius: 20px;
                overflow: hidden;
                width: 170px;
                height: 170px;
                display: inline-block;
                z-index: 344;
                background-color: #cecece;
                position: relative;
                transition: all 1s;
                -moz-transition: all 1s;
                -webkit-transition: all 1s;
                -o-transition: all 1s;
                cursor: pointer;
            }

            .d-image:hover:after {
                display: block;
            }

            .d-image:after {
                content: "×";
                font-size: 44px;
                text-align: center;
                width: 50%;
                margin: auto;
                position: absolute;
                top: 50%;
                display: none;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }

            .d-image:hover> img {
                -webkit-filter: blur(5px);
                -moz-filter: blur(5px);
                -ms-filter: blur(5px);
                filter: blur(5px);
            }
        </style>
    </head>

    <body ondrop="return false" ondragover="return false">
        <!--防止拖拽跳转-->
        <div id="file-upload">
            <div id="file-upload-box">
                <label id="drop_zone">将文件拖拽到这里或点击这里
                    <input multiple id="files" type="file" hidden="hidden" style="display: none;" name="files[]" />
                </label>
                <div id="output_area"></div>
            </div>
        </div>
        <div style="position: absolute; bottom: 10px; left: 40px; right: 40px;text-align: center;">
            <button onclick="demo.ImageLs=[];reloadDiv();" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">清空</button>
            <button onclick="alert('上传')" style="padding: 5px 10px; background: #fff; border: 1px #000 solid; cursor: pointer;">上传</button>
        </div>
        <script>
            var ImgType = ["gif", "jpeg", "jpg", "bmp", "png", "ico", "webp"];

            function getFileUrl(fileObj) {
                return window.URL.createObjectURL(fileObj);
            }

            //拖拽功能
            var output = document.getElementById('output_area');
            var dropZone = document.getElementById('drop_zone');
            if(!(('draggable' in dropZone) && ('ondragenter' in dropZone) &&
                    ('ondragleave' in dropZone) && ('ondragover' in dropZone) &&
                    window.File)) {
                document.getElementById('error_msg').style.display = 'block';
                document.getElementById('demo_area').style.display = 'none';
            } else {

                function handleFileDragEnter(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.add('hovering');
                }

                function handleFileDragLeave(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.remove('hovering');
                }

                function handleFileDragOver(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'copy';
                }

                function handleFileDrop(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    this.classList.remove('hovering');
                    FilesGetImgSv(e.dataTransfer.files);
                }

                dropZone.addEventListener('dragenter', handleFileDragEnter, false);
                dropZone.addEventListener('dragleave', handleFileDragLeave, false);
                dropZone.addEventListener('dragover', handleFileDragOver, false);
                dropZone.addEventListener('drop', handleFileDrop, false);
            }

            //<input

            function handleFileSelect(evt) {
                FilesGetImgSv(evt.target.files);
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);

            //图片文件 过滤 显示
            function FilesGetImgSv(files) {//获取文件
                for(var i = 0, f; f = files[i]; i++) {
                    if(RegExp("\.(" + ImgType.join("|") + ")$", "i").test(f.name.toLowerCase())) { //这里是简单后缀验证,可添加f.type验证格式
                        f.BolbUrl = getFileUrl(f);
                        demo.ImageLs.push(f);
                    }
                }
                reloadDiv();
            }
            function reloadDiv(){//刷新视图
                var t="";
                demo.ImageLs.forEach(function(v,i){
                    t=t+`<div class="upload-img-itme"><div class="d-image" onclick="demo.removeThisUpImg(${i})">![](${v.BolbUrl})</div><a class="rimg-name"><strong>${v.name}</strong></a></div>`;
                });  
                document.getElementById("output_area").innerHTML=t;
            }
            var demo = {
                ImageLs: [],
                removeThisUpImg: function(index) {
                    demo.ImageLs.splice(index, 1); 
                    reloadDiv();
                }
            };
        </script>
    </body> 
</html>

动用Vue效果示例

//css
<style type="text/css">
    button{
      padding:5px 20px;
      background: #00a854;
    }
    .container{
      display: flex;
      flex-direction: row;
      align-items: stretch;/*默认值,如果子元素未设置高度或设为auto,将占满整个容器的高度,如果子元素设置高度100%,padding或margin时会导致子元素溢出*/
      height: 600px;
      margin:30px;
    }
    .widget{
      width: 200px;
      margin-right: 10px;
      padding:10px;
      border:1px solid #ccc;
    }
    .zone{
      flex:1 1 auto;
      background: #f1f1f1;
    }
  </style>

//html
<div class="container">
  <div class="widget">
    <button type="button" id="target" draggable="true">drag me</button>
  </div>
  <div class="zone" id="zone">
  </div>
</div>
 在拖动目标上触发事件 (源元素):
        ondragstart - 用户开始拖动元素时触发
        ondrag - 元素正在拖动时触发
        ondragend - 用户完成元素拖动后触发
 释放目标时触发的事件:
        ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
        ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
        ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

要想拖动网页中的三个成分,我们务必给这些成分设置draggable的习性为true

在H5借使想拖动三个要素非凡不难,只必要将它的draggable属性设置true即可,在控件编辑器中,控件本人是1段可插入的HTML,并能够涵盖css和js脚本

 

<div draggable="true"></div>

可拖动的因素是控件的外在体现情势,1般用icon体现,此处为了便利,选取button。大家能够在dragstart事件,给拖动的因素用dataTransfer.setData方法设置控件的HTML,然后在拖动结束后添加到Zone,代码具体如下

上边来看多少个例证

大多数浏览器的图纸和链接是暗中认可能够拖动的。

<script>
  let target=document.getElementById('target');
  let zone=document.getElementById('zone');

  target.ondragstart=function (e) {
      e.dataTransfer.setData('html','<h1>Hello world</h1>');
  };

  zone.ondragover=function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect='copy';
  };

  zone.ondrop=function (e) {
    e.preventDefault();
    let html=e.dataTransfer.getData('html');
    //插入HTML在DOM Tree的特定位置,不会影响内部已存在的元素,避免额外的序列化,比直接操控innerHTML高效,参考https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
    zone.insertAdjacentHTML('afterbegin',html);
  };
</script>

第三:本地拖放

  • #### 拖动进度中触发的轩然大波

拖动成分的基本原理正是如此,后续小编将呈现如何编写控件

 

在拖动的进度中会触发一名目繁多事件。

JSBin
Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    #boxContainer{
        background-color: #BC8F8F;
        width: 600px;
        height: 400px;
    }
</style>
<body>
<div id="boxContainer"></div>
<div id="msg"></div>
<script>
    var imgContainer,msgDiv;
window.onload=function(){
    imgContainer=document.getElementById("boxContainer");
    msgDiv=document.getElementById("msg");
    imgContainer.ondragover=function(e){
        e.preventDefault();//阻止事件event默认行为
    };
    imgContainer.ondrop=function(e){//通过showObj函数显示信息知道本地图片拖拽与file信息有关
        e.preventDefault();
        var f=e.dataTransfer.files[0];//获取信息
        var fileReader=new FileReader();//读取信息
        fileReader.onload=function(e){//通过fileReader监听事件
            showObj(e.target);
            imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
        };
        fileReader.readAsDataURL(f);//读取地址
    }
};
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
    var s="";//声明局部变量
    for(var k in obj){//用forin循环遍历数据信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//显示信息在HTML
}
</script>    
</body>
</html>
drag ------ 被拖动元素在拖动的过程中会持续触发,给拖动元素设置该事件。
dragstart  ------ 被拖动元素在拖动开始时会触发,给拖动元素设置该事件。
dragend ------ 被拖动元素在拖动结束时会触发,给拖动元素设置该事件。
dragenter ------ 进入目标区域时会触发,给目标区域设置该事件。
dragleave ------ 离开目标区域时会触发,给目标区域设置该事件。
dragover ------ 进入目标区域时会持续触发,给目标区域设置该事件。
drop ------ 结束拖放,也就是松开鼠标时触发,目标区域或者拖动元素都可设置。

 

  • #### 简单的例子

第二:H5拖放

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style type="text/css">
    .box{
        width:400px;
        height:300px;
    }
    #box1{
        float: left;
        background-color: orange;
    }
    #box2{
        float: left;
        background-color: rosybrown;
    }
</style>
<body>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="images/demo.jpg" width="200" height="200"/>
<div id="msg"></div>
<script>
       var box1Div,box2Div,msgDiv,img1;//声明全局变量
window.onload=function(){
    box1Div=document.getElementById("box1");//获取放置拖拽元素的div
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");//获取显示拖拽信息的元素的div
    img1=document.getElementById("img1");

    box1Div.ondragenter=function(e){//给其添加ondragenter即当被鼠标拖动的对象进入其容器范围内时触发此事件,即给拖拽加监听事件        showObj(e);//e为event事件为事件参数   }
    box1Div.ondragover=function(e){
        e.preventDefault();//阻止事件event默认行为
    };
    box2Div.ondragover=function(e){//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        e.preventDefault();//阻止事件event默认行为,调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    };
    img1.ondragstart=function(e){//ondragstart - 用户开始拖动元素时触发
        e.dataTransfer.setData("imgId","img1");//用setData方法获取数据
    };
    box1Div.ondrop=dropImghand;
    box2Div.ondrop=dropImghand;//ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
};
function dropImghand(e){//box1Div.ondrop=后拿出来设置函数名,即封装成方法,再在上面引用
    showObj(e.dataTransfer);
    e.preventDefault();//阻止事件event默认行为
    //创建节点,放置数据
    var img=document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);//添加到节点当中
}
function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
    var s="";//声明局部变量
    for(var k in obj){//用forin循环遍历数据信息
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;//显示信息在HTML
}

</script>
</body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .box{
                height:140px;
                width:140px;
                border:1px solid black;
                padding:25px;
                margin-bottom:20px;
            }
            .move{
                height:120px;
                width:120px;
                border:1px solid green;
                background:green;
            }
        </style>
        <script>
            function moveover(e){//拖动事件以参数形式传进函数内部
                e.preventDefault();//去除浏览器默认效果
            }
            function drop(e){
                e.preventDefault();
                var data=e.dataTransfer.getData("Text");//取到数据
                e.target.appendChild(document.getElementsByClassName(data)[0]);
            }
            function movestart(e){
                e.dataTransfer.setData("Text",e.target.className);//
在dataTrasfer对象上存储数据
            }
        </script>
    </head>
    <body>
        //绑定事件形式的拖放操作
        <div class="box" ondragover="moveover(event)" ondrop="drop(event)"></div>
        <div class="move" draggable="true" ondragstart="movestart(event)"></div>
    </body>
</html>

 

4858美高梅 1

图.jpg

  • #### dataTransfer对象

拖动事件有二个dataTransfer属性,它自个儿指向1个目的,包括了与拖动相关的各种音信。

// dataTransfer的属性
dropEffect ------ 拖放的操作类型,决定了浏览器如何显示鼠标形状,可能的值为copy、move、link和none。
effectAllowed ------ 指定所允许的操作,可能的值为copy、move、link、copyLink、copyMove、linkMove、all、none和uninitialized(默认值,等同于all,即允许一切操作)。
files ------ 包含一个FileList对象,表示拖放所涉及的文件,主要用于处理从文件系统拖入浏览器的文件。
types ------ 储存在DataTransfer对象的数据的类型。

// dataTransfer的方法
setData(format, data) ------ 在dataTransfer对象上储存数据。第一个参数format用来指定储存的数据类型,比如text、url、text/html等。
getData(format) ------ 从dataTransfer对象取出数据。
clearData(format) ------ 清除dataTransfer对象所储存的数据。如果指定了format参数,则只清除该格式的数据,否则清除所有数据。
setDragImage(imgElement, x, y) ------ 指定拖动过程中显示的图像。默认情况下,许多浏览器显示一个被拖动元素的半透明版本。参数imgElement必须是一个图像元素,而不是指向图像的路径,参数x和y表示图像相对于鼠标的位置。
dataTransfer对象允许在其上存储数据,这使得在被拖动元素与目标元素之间传送信息成为可能。
  • #### 实例:拖动页面成分

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            .divBox{
                width:200px;
                border:1px dotted black;
                margin:20px;
                padding:10px;
            }
            .divBox .move{
                height:40px;
                width:150px;
                border:1px solid green;
                background:green;
                margin:0px auto;
            }
        </style>
    </head>
    <body>
        <div class="divBox">
            <div class="move" draggable="true" ></div>
        </div>
        <div class="divBox"></div>
        <div class="divBox"></div>
        <div class="divBox"></div>
        <script>
            var moveBox = document.querySelector(".move");//选取第一个class为move的节点
            var boxs = document.querySelectorAll(".divBox");//选取所有class为divBox的节点

            moveBox.addEventListener("dragstart",function(e){//绑定一个监听事件,当dragstart事件发生时,调用回调函数
                e.dataTransfer.setData("text",e.target.className);//类名
            });

            moveBox.addEventListener("dragend",function(e){

            });

            for(var i = 0;i < boxs.length;i++){//给每个div绑定事件
                boxs[i].addEventListener('dragover', function(e) {
                    e.preventDefault();//避免浏览器的默认值
                    e.dataTransfer.dropEffect = 'move';
                    this.style.border = '1px solid red';
                    this.style.height = '42px';
                    return false;
                });

                boxs[i].addEventListener('drop', function(e) {
                  e.preventDefault(); 
                  e.stopPropagation();
                  this.style.border = '1px dotted black';
                  this.style.height = '';
                  var data =  e.dataTransfer.getData('text');//取得数据
                  this.appendChild(document.getElementsByClassName(data)[0]);//把拖动元素放到目标div中
                });

                boxs[i].addEventListener('dragenter', function(e) {
                  e.preventDefault(); 
                });

                boxs[i].addEventListener('dragleave', function(e) {
                  e.preventDefault();
                  this.style.border = '1px dotted black';
                  this.style.height = '';
                });
            }
        </script>
    </body>
</html>

4858美高梅 2

4858美高梅,图2.jpg

  • #### 拖放的别的用途

拖放操作给彼此本来就很少的html扩展了众多乐趣,通过H五的拖放操作,大家还足以开始展览板块的复制,沟通等,自个儿技术能力有限,等钻探清楚了迟早补上。

  • #### 资料与文献

此文资料部分参考自:
草根程序员
W3C
如想更长远摸底H5的拖放,请参考上述文献。

作者:jingks
此为原创小说,请勿用在商业用途,转发请标明小编。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有