HTML页面内拖动图片到input标签实现上传功能

最新推荐文章于 2024-10-04 06:11:34 发布

名字真难取_

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量282

点赞数 5

文章标签： html 前端拖动API

本文链接：https://blog.csdn.net/Zrf2191318455/article/details/142252668

版权

一个热知识：

HTML5新增了拖放API

首先先来对拖放API做个基本了解：

概念API：了解概念即可

dragsource：被拖放的元素

dragtarget：拖拽的目标区域

可操作API：可以像点击事件‘click’一样进行操作，加粗的为常用API

dragstart：拖放开始

dragenter：拖放的数据进入目标区域

dragover：拖放的数据在目标区域上悬停

dragleave：拖放的数据离开目标区域

drop：放置拖放的数据

dragend：拖放结束

主要功能讲解：以拖拽图片到input为例

dragstart：

设置在图片上，将图片默认为拖拽源，也就是需要被拖拽的元素。需要注意的是，图片默认可以被拖拽，所以可以直接使用该方法；而对于其他元素，比如button来说，默认不可以被拖拽，所以需要在标签上添加属性：draggable="true"，将元素设置为可拖动之后才可以使用该方法。

dragover：

设置在input，也就是目标区域元素上，主要作用是关闭默认事件，因为浏览器默认行为会阻止拖放操作。

drop：

设置在input，也就是目标区域元素上，当设置了dragover和drop之后，就会将添加这两个方法的元素默认为拖放目标元素。在此方法中，最好也禁止默认事件，这样可以保证你可以完全控制拖放操作的结果。

代码演示：

此处为html演示，可以自行转换react或者vue。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file">
    <button draggable="true">点我显示上传的图片</button>//用来测试是否拖动成功的按钮，同时也用来演示控制非img图片拖动的draggable属性
    <img src="./R.jpg" style="width: 100px;height: 100px;">//任意两张图片
    <img src="./OIP.jpg" style="width: 100px;height: 100px;">//任意两张图片
    <script>
        const btn=document.querySelector('button')
        const inp=document.querySelector('input')
        const img=document.querySelector('img')
        img.addEventListener('dragstart',(e)=>{//img开始拖拽，可以在此进行一定设置
            e.dataTransfer.setData('text/plain',e.target.src)//本行代码并不是必须的，该代码将拖动的数据添加到DataTransfer对象中，供过程中其他API使用
        })
        inp.addEventListener('dragover',(e)=>{//关闭dragover的默认事件，必须
            e.preventDefault()
        })
        inp.addEventListener('drop',(e)=>{//在目标上放置拖放的数据
            e.preventDefault()
            console.log(e.dataTransfer.getData('text/plain')//演示dragstart中存储的数据如何获取
            const files=e.dataTransfer.files//获取到数据中的文件
            if(files.length>0){//当文件不为空时将文件添加到目标中
                inp.files=files
            }
        })
        btn.addEventListener('click',()=>{
            console.log(inp.files[0]);//打印验证是否成功
        })
        btn.addEventListener('dragstart',(e)=>{//当button标签有draggable属性时，该方法可以出发，否则无法触发。
            console.log(1);
        })
    </script>
</body>
</html>