H5拖拽与文件上传

最新推荐文章于 2024-06-17 16:12:35 发布

lhrdlp

最新推荐文章于 2024-06-17 16:12:35 发布

阅读量1k

点赞数 7

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lhrdlp/article/details/105200995

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.设置拖拽

图片元素自带拖拽属性,其他元素可设置draggable属性.

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

元素设置拖拽之后可以看到拖动.

不设置拖拽时除了图片元素其他元素是不可拖拽的.

1.1 拖拽元素事件

ondragstar:拖拽前出发,事件只会触发一次.
ondrag:拖拽前,拖拽结束之间触发,事件会连续触发,
ondragend:拖拽结束触发,事件只触发一次.

        let box = document.querySelector('.box')
        box.ondragstart = function (e) {
           console.log('拖拽开始')
        }
        box.ondrag = function (e) {
           console.log('拖拽ing.......')
        }
        box.ondragend = function (e) {
           console.log('拖拽结束')
        }

打印的结果:

1.2 目标元素拖拽事件

ondragenter:进入目标元素触发
ondragover:进入目标元素触发
ondragleave:离开目标元素触发
ondrop:在目标元素上释放鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            float: left;
            width: 300px;
            height: 400px;
            background-color: skyblue;
            font-size:20px;
            color:purple;
            text-align: center;
            line-height:400px;
        }

        .box {
            float: right;
            width: 150px;
            height: 150px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="box" draggable="true"></div>
    <!-- <img src="https://img9.doubanio.com/view/photo/l/public/p2492913246.webp" width="200"> -->
    <div class="wrap">把元素移入这里</div>
    <script>
        let wrap = document.querySelector('.wrap')
        let box = document.querySelector(".box");
        //被拖拽元素对象事件
         // dragstart 拖拽开始时触发,只触发一次
         box.ondragstart = function () {
            this.style.background = 'blue';

        }

        // drag拖拽触发的事件,连续触发,只要鼠标不松开会一直触发
        box.ondrag = function () {
            this.style.background = 'yellow';
        }

        // dragend 拖拽结束时,触发的事件,只要鼠标一松开就触发
        box.ondragend = function () {
            this.style.background = 'pink';
        }


        //拖拽元素被拖拽到的对象事件
        //进入目标元素触发
        wrap.ondragenter = function () {
            this.innerHTML = '元素进入了'
        }
        //离开目标元素触发
        wrap.ondragleave = function () {
            this.innerHTML = '讨厌,谁让你离开的'
        }
        //在目标元素中移动触发
        wrap.ondragover = function () {
            this.innerHTML = '元素移动了'
            return false;
        }
        //在目标元素上释放鼠标触发
        wrap.ondrop = function () {
            this.innerHTML = '鼠标松开了'
        }
    </script>
</body>

</html>

1.2 dataTransfer对象

dataTransfer 是拖拽事件对象的属性 .

1.setData() : 设置数据 key和value(必须是字符串)

2.getData() : 获取数据，根据key值，获取对应的value

        let box = document.querySelector(".box");
        let wrap = document.querySelector(".wrap");
        //datatransfer 拖拽对象的事件属性
        box.ondragstart = function (e) {
            this.style.background = 'pink';
            e.dataTransfer.setData('key', this.className);
            // 火狐必须加上这一行代码才能触发drag和dragend事件
        }
        wrap.ondragover = function () {
            console.log(1)
            return false
        }
        // 设置的key在这里可以使用
        wrap.ondrop = function (e) {
            this.style.background = 'skyblue';
            //获取box元素
            let key =document.querySelector("."+ e.dataTransfer.getData("key"));
            // console.log(key);
            //删除box
            document.body.removeChild(key);
        }

元素移入之后就被删除了

3.effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

box.ondragstart = function (e) {
    e.dataTransfer.effectAllowed = 'link';
}

4.files:获取外部拖拽的文件，返回一个filesList列表 filesList下有个type属性,返回文件的类型

wrap.ondrop = function (e) {
    let a = e.dataTransfer;
    console.log(a.files)
    return false;
}

当我把文件拖入之后,打印的结果如下图(可以看到图片的大小,类型,最后修改时间等信息):

2.读取文件信息

通过FileReader对象可以读取本地存储的文件信息, 使用File对象指定要读取的文件数据.

2.1 FileReader读取文件信息(利用拖拽来读取文件信息)

readAsDataURL 参数为要读取的文件对象

onload当读取文件成功完成的时候触发此事件

this. result 获取读取的文件数据

示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 100px;
            margin: 20px auto;
            border-radius: 5px;
            background-color: #ccc;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }

        .container {
            width: 800px;
            height: 400px;
            margin: 20px auto;
            border: 2px solid skyblue;
        }

        .container>img {
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="box">把图片拖至这里</div>
    <!-- 用来展示已经拖入的图片 -->
    <div class="container"></div>

    <script>
        //获取元素
        let box = document.querySelector('.box');
        let container = document.querySelector(".container");

        box.ondragover = function (ev) {
            //阻止默认事件
            ev.preventDefault();
            //阻止事件冒泡
            ev.stopPropagation();
            return false;
        }

        box.ondrop = function (ev) {
            ev.preventDefault()
            ev.stopPropagation()
            //获取文件信息
            console.log(ev.dataTransfer.files)
            let file = ev.dataTransfer.files[0];

            //创建读取文件的对象
            let oFiles = new FileReader();
            console.log(oFiles)
            //获取文件的URL地址
            oFiles.readAsDataURL(file);
            //文件信息读取完成之后会触发onload 事件
            oFiles.onload = function () {
                let src = this.result;
                // console.log(src);
                if (file.type.includes('image')) {
                    //创建图片标签
                    let img = new Image();
                    //设置渲染图片的URL地址
                    img.src = src;
                    //将图片作为contianer的子元素渲染到页面中
                    container.appendChild(img);
                }
            }
            return false;
        }
    </script>
</body>

</html>

2.2 利用表单域读取文件信息

表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息

选择文件之后出发onchange事件.

一段代码:

         //表单域返回的DOM元素身上有一个files的属性,这个属性值就是一个Files对象, 里面保存选中的文件的信息 
        var file = document.querySelector('#file');
        file.onchange = function() {
            console.dir(this);
        }

利用表单读取文件信息:

<input type="file" name="file" multiple />

<script>
    var file = document.querySelector("input")

    file.addEventListener("change",function(){
        console.log(this.files)
    },false)

</script>

案例

html代码:

   <input type="file" id='file' multiple/>
    <div class="container"></div>

JavaScript代码

       //获取元素
        let container = document.querySelector(".container");
        let file = document.querySelector('#file');
        file.onchange = function () {
            let files = this.files;
            let length = files.length;
            if(length){
                for(let i = 0; i < length; i++){
                    Render(files[i])
                }
            }
        }
        function Render(file) {
            //创建读取文件的对象
            let oFile = new FileReader();

            // 通过读取文件对象的readAsDataURL 方法读取指定的文件
            oFile.readAsDataURL(file);

            //文件信息读取完毕触发onload事件
            oFile.onload = function() {
                let src = this.result;
                //创建图片标签
                let img = new Image();
                img.src = src;
                container.appendChild(img);
            }
        }

最终实现的效果就是可以同时上传多个图片