当前位置： 首页 > news >正文

文件拖拽上传功能已经烂大街了，你还不会吗？

news 2025/10/18 16:47:34

说在前面

🖼文件拖拽上传功能现在已经随处可见，大家应该都用过了吧，那么它具体是怎么实现的大家有去了解过吗？今天我们一起来实现一下这个功能，并封装一个拖拽上传组件吧。

效果展示

image.png

AI改图-2023-09-23-23-08-48-720x405.gif

体验地址：http://jyeontu.xyz/jvuewheel/#/JDragUploadView

功能实现

原生JavaScrip实现

首先我们应该先将页面写好：

<!DOCTYPE html>
<html lang="en"><head><title>点击或拖拽上传并显示图片</title><style>body {display: flex;flex-direction: column;}h1 {text-align: center;}#drop-zone {width: 300px;height: 200px;border: 2px dashed #ccc;margin: 20px auto;text-align: center;line-height: 200px;font-size: 18px;}#uploaded-image {max-width: 300px;max-height: 300px;margin: 20px auto;}</style></head><body><h1>点击或拖拽上传并显示图片示例</h1><div id="drop-zone">点击或拖拽上传图片</div><img id="uploaded-image" src="" alt="上传的图片" /><script></script></body>
</html>

image.png

我们试下直接拖拽图片到页面上是什么效果

AI改图-2023-09-23-21-43-40-720x405.gif

我们发现直接将图片拖拽到页面上会在新页面打开图片，那么我们需要阻止这一个默认行为以允许放置，页面的拖拽行为主要会触发以下几个事件：

dragenter

dragenter 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发。

目标对象是用户直接选择的范围（由用户直接指示作为放置目标的元素），或者 <body> 元素。

dragleave

dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发。

此事件不可取消。

dragover

dragover 事件在可拖动的元素或者被选择的文本被拖进一个有效的放置目标时（每几百毫秒）触发。

该事件在放置目标上触发。

drop

drag 事件在用户拖动元素或选择的文本时，每隔几百毫秒就会被触发一次。

效果实现
获取上传框和预览框元素
const dropZone = document.getElementById("drop-zone");
const uploadedImage = document.getElementById("uploaded-image");
图片进入上传框时，为上传框加一层灰色蒙层

监听上传框的dragenter事件，在图片移动进入上传框时改变上传框的背景颜色。

dropZone.addEventListener("dragenter", function (event) {dropZone.style.backgroundColor = "#f7f7f7";
});
图片离开上传框时，去除上传框的灰色蒙层

监听上传框的dragleave事件，在图片移出上传框时去除上传框的背景颜色。

dropZone.addEventListener("dragleave", function (event) {dropZone.style.backgroundColor = "";
});
阻止浏览器默认行为，例如打开文件

dragover和drop事件都会触发浏览器打开文件，我们需要阻止其默认行为。

dropZone.addEventListener("dragover", function (event) {event.preventDefault();
});
dropZone.addEventListener("drop", function (event) {event.preventDefault();
});
获取拖拽上传的文件

拖拽释放会触发drop事件，我们只需要监听drop事件，获取到拖拽的文件列表event.dataTransfer.files即可。

dropZone.addEventListener("drop", function (event) {event.preventDefault();dropZone.style.backgroundColor = "";const file = event.dataTransfer.files[0];handleFile(file);
});
处理上传文件，为图片时设置预览图

判断上传的文件是否为图片，我们只需要判断上传文件的type是否为image开头，是的话我们可以将其转为dataUrl文件并设置预览。

  function handleFile(file) {if (file && file.type.startsWith("image/")) {const reader = new FileReader();reader.onload = function (event) {uploadedImage.src = event.target.result;};reader.readAsDataURL(file);}}

封装为vue组件

知道了原生js实现一个拖拽上传功能之后，我们也能很容易得将其封装成一个vue组件。

监听拖拽事件

在vue中，我们直接通过@dragover、@dragleave、@drop即可监听元素的拖拽事件。

<divclass="upload-area"@dragover.prevent="handleDragOver"@dragleave="handleDragLeave"@drop.prevent="handleDrop"@click="handleUploadClick"
><p v-if="!isDragging" class="tip-text">{{ tipText }}</p><p v-else>{{ tipConfirmText }}</p>
</div>

事件的处理逻辑和原生js其实都是一样的。

methods: {handleDragOver(event) {event.preventDefault();this.isDragging = true;},handleDragLeave() {this.isDragging = false;},handleDrop(event) {event.preventDefault();this.isDragging = false;const file = event.dataTransfer.files[0];this.uploadFile(file);}
}
获取到上传文件并传递给父组件

获取到上传的文件后，我们不应该组件内直接处理文件了，将其传递给父组件进行处理即可。

uploadFile(file) {this.$emit("uploadFile", file);
}
组件完整代码

功能逻辑与原生JavaScrip基本相同，这里也不重复描述了，直接看代码吧：

<template><div class="drag-upload"><divclass="upload-area"@dragover.prevent="handleDragOver"@dragleave="handleDragLeave"@drop.prevent="handleDrop"@click="handleUploadClick"><p v-if="!isDragging" class="tip-text">{{ tipText }}</p><p v-else>{{ tipConfirmText }}</p></div><inputtype="file"ref="fileInput"style="display: none"@change="handleFileSelected"/></div>
</template><script>
export default {name: "JDragUpload",props: {tipText: {type: String,default: "将文件拖放到此处或点击上传",},tipConfirmText: {type: String,default: "释放文件以上传",},},data() {return {isDragging: false,};},methods: {handleDragOver(event) {event.preventDefault();this.isDragging = true;},handleDragLeave() {this.isDragging = false;},handleDrop(event) {event.preventDefault();this.isDragging = false;const file = event.dataTransfer.files[0];this.uploadFile(file);},handleUploadClick() {this.$refs.fileInput.click();},handleFileSelected() {const file = this.$refs.fileInput.files[0];this.uploadFile(file);},uploadFile(file) {this.$emit("uploadFile", file);},},
};
</script><style lang="less" scoped>
.drag-upload {display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;border: 2px dashed #ccc;.upload-area {display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;background-color: #f0f0f0;cursor: pointer;.tip-text {text-align: center;}}
}
</style>

image.png

源码

组件体验及文档地址：http://jyeontu.xyz/jvuewheel/#/JDragUploadView

Gitee源码：https://gitee.com/zheng_yongtao/jyeontu-component-warehouse/tree/master/JYeontuComponentWarehouse/packages/JDragUpload

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。

相关文章：

文件拖拽上传功能已经烂大街了，你还不会吗？

说在前面 &#x1f5bc;文件拖拽上传功能现在已经随处可见&#xff0c;大家应该都用过了吧&#xff0c;那么它具体是怎么实现的大家有去了解过吗&#xff1f;今天我们一起来实现一下这个功能&#xff0c;并封装一个拖拽上传组件吧。 效果展示 体验地址&#xff1a;http://jyeon…...

编程日记 2023/9/28 2:01:33

TCP与UDP协议详解！！！

TCP/IP运输层中的两个重要协议 TCP的报文结构 TCP的流量控制 流量控制&#xff1a;让发送方发送速率不要太快&#xff0c;TCP协议使用滑动窗口实现流量控制。 利用滑动窗口机制可以很方便地在TCP连接上实现对发送方的流量控制。 TCP接收方利用自己的接收窗口的大小来限制发送…...

编程日记 2023/9/28 2:00:32

《C++ primer》练习6.36-6.38:书写返回数组引用的函数声明

最近看C primer&#xff0c;看到《C primer》6.3.3练习&#xff0c;要求书写返回数组引用的函数声明&#xff0c;觉得有必要实践记录一下。 这里先总结返回数组的引用的的函数声明写法&#xff08;下面的Type是数组元素的类型&#xff0c;可以是int、float等&#xff0c;如果要…...

编程日记 2023/9/28 1:59:32

Spring Cloud Gateway快速入门（三）——过滤器

文章目录 前言Gateway内置网关过滤器什么是网关过滤器Gateway内置网关过滤器GlobalFilterPreFilterPostFilter 使用示例 Gateway全局网关过滤器什么是全局网关过滤器使用全局网关过滤器注册全局网关过滤器使用全局网关过滤器 全局网关过滤器和Gateway内置网关过滤器的区别1. 注…...

编程日记 2023/9/28 1:52:26

vue3相比vue2的优点

一、响应式&#xff1a; &#xff08;1&#xff09;vue2&#xff1a;内置的Object.defineProperty将data中的数据转化成响应式数据的&#xff0c;它会将data中的每个属性都转换为具有getter和setter的响应式属性 Object.defineProperty是一个内置的方法&#xff0c;它用于定义…...

编程日记 2023/9/28 1:51:25

gitee-快速设置

快速设置— 如果你知道该怎么操作&#xff0c;直接使用下面的地址 HTTPS SSH: gitgitee.com:liuzl33078235/esp-idf.git 我们强烈建议所有的git仓库都有一个README, LICENSE, .gitignore文件 初始化 readme 文件 Git入门&#xff1f;查看 帮助 , Visual Studio / TortoiseG…...

编程日记 2023/9/28 1:50:24

将切分的图片筛选出有缺陷的

将切分的图片筛选出有缺陷的 需求代码 需求 由于之前切分的图像有一些存在没有缺陷&#xff0c;需要再次筛选 将可视化的图像更改后缀 更改为xml的 可视化代码 可视化后只有7000多个图像 原本的图像有1W多张 代码 # 按照xml文件删除对应的图片 # coding: utf-8 from P…...

编程日记 2023/9/28 1:49:23

el-tooltip内容换行显示

效果图&#xff1a; html: <div class"rules-tooltip flex-center"><el-tooltip class"item" effect"dark" placement"bottom-start"><div slot"content" v-html"tipsContent"></div>&l…...

编程日记 2023/9/28 1:48:22

linux 下用posix semaphore 解决资源竞争问题实例

/* author: hjjdebug date: 2023年 09月 20日 星期三 09:33:58 CST description: 10辆汽车通过承重5辆汽车的桥,处理一个资源争用问题 * 10个线程代表10辆汽车 * 桥上只能承载5辆汽车, 代表最大只能同时有5辆汽车通过 概要: 让10个线程竞争5个资源,用posix 接口, sem…...

编程日记 2023/9/28 1:46:19

RocketMQ —消费者负载均衡

消费者从 Apache RocketMQ 获取消息消费时&#xff0c;通过消费者负载均衡策略&#xff0c;可将主题内的消息分配给指定消费者分组中的多个消费者共同分担&#xff0c;提高消费并发能力和消费者的水平扩展能力。本文介绍 Apache RocketMQ 消费者的负载均衡策略。 背景信息​ …...

编程日记 2023/9/28 1:43:17

Python自动化小技巧23——PDF文件拆分为单独页面(PyMuPDF)

其实编辑PDF用Adobe就行&#xff0c;它功能超级齐全&#xff0c;可是这玩意要收费...去弄免费破解版&#xff0c;找资源又得半天&#xff0c;所以用python来拆分PDF文件吧&#xff0c;可以批量化处理。 至于为什么不用WPS.....别问&#xff0c;问就是不想开会员。 脚本代码 先…...

编程日记 2023/9/28 1:42:16

CISSP学习笔记：通过原则和策略的安全治理

#第一章 通过原则和策略的安全治理 1.1 理解和应用机密性、完整性和可用性的 安全的主要目标&#xff0c;CIA三元组 机密性、完整性和可用性&#xff0c;每条原则的重要性主要取决于组织的安全目标以及安全性所受到的威胁程度 1.1.1 机密性 机密性&#xff1a;限制未授权主…...

编程日记 2023/9/28 1:40:14

【Java 进阶篇】数据定义语言（DDL）详解

数据定义语言&#xff08;DDL&#xff09;是SQL&#xff08;结构化查询语言&#xff09;的一部分&#xff0c;它用于定义、管理和控制数据库的结构和元素。DDL允许数据库管理员、开发人员和其他用户创建、修改和删除数据库对象&#xff0c;如表、索引、视图等。在本文中&#x…...

编程日记 2023/9/28 1:39:13

MySQL详细案例 1：MySQL主从复制与读写分离

文章目录 1. MySQL主从复制1.1 使用场景1.2 MySQL的复制类型1.3 主从复制的作用1.4 主从复制的工作过程1.5 实现MySQL主从复制1.5.1 前置准备1.5.2 主服务器mysql配置1.5.3 从服务器1 mysql配置1.5.4 从服务器2 mysql配置 1.6 MySQL主从复制延时问题的原因和解决办法1.6.1 故障…...

编程日记 2023/9/28 1:38:11

Kafka 常见问题

文章目录 kafka 如何确保消息的可靠性传输Kafka 高性能的体现利用Partition实现并行处理利用PageCache 如何提高 Kafka 性能调整内核参数来优化IO性能减少网络开销批处理数据压缩降低网络负载高效的序列化方式 kafka 如何确保消息的可靠性传输 消费端弄丢了数据 唯一可能导致…...

编程日记 2023/9/28 1:37:10

如何去开展软件测试工作

1. 软件测试 在一般的项目中&#xff0c;一开始均为手动测试&#xff0c;由于自动化测试前期投入较大&#xff0c;一般要软件项目达到一定的规模&#xff0c;更新频次和质量均有一定要求时才会上自动化测试或软件测试。 1.1. 项目中每个成员的测试职责 软件测试从来不是某一…...

编程日记 2023/9/28 1:34:07

详解如何在python中实现简单的app自动化框架

一、app自动化环境搭建 1、安装jdk及配置jdk的环境变量 app底层是c语言&#xff0c;应用层是java&#xff0c;所以需要jdk 2、安装SDK&#xff0c;配置android SDK环境 3、安装模拟器 4、下载安装Appium工具 01、appium客户端 appium destop 服务器 02、命令行安装&#…...

编程日记 2023/9/28 1:33:06

【TCP】三次握手 与 四次挥手 详解

三次握手 与 四次挥手 1. 三次握手2. 四次挥手三次握手和四次挥手的区别 在正常情况下&#xff0c;TCP 要经过三次握手建立连接&#xff0c;四次挥手断开连接 1. 三次握手 服务端状态转化&#xff1a; [CLOSED -> LISTEN] 服务器端调用 listen 后进入 LISTEN 状态&#xff…...

编程日记 2023/9/28 1:32:05

正则表达式新解

文章目录 是什么&#xff1f;正则用法匹配单个字符匹配一组字符其他元字符核心函数 贪婪匹配和非贪婪匹配正则练习 是什么&#xff1f; 正则表达式(Regular Expression)是一种文本模式&#xff0c;包括普通字符&#xff08;例如&#xff0c;a 到 z 之间的字母&#xff09;和特殊…...

编程日记 2023/9/28 1:29:02

MissionPlanner编译过程

环境 windows 10 mission planner 1.3.80 visual studio 2022 git 2.22.0 下载源码 (已配置git和ssh) 从github上克隆源码 git clone gitgithub.com:ArduPilot/MissionPlanner.git进入根目录 cd MissionPlanner在根目录下的ExtLibs文件下是链接的其它github源码&#xff0…...

编程日记 2023/9/28 1:28:01

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/10/14 13:37:54

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/10/17 3:30:01

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/10/15 16:46:28

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/10/18 15:49:46

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/10/14 4:10:21

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/10/5 4:44:28

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34