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

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

news 2025/7/6 0:02:10

说在前面

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

效果展示

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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/7/5 9:34:52

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/5 1:06:55

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/6/15 11:32:55

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/7/5 2:19:17

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/7/4 7:22:38

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/7/5 3:34:07

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/7/5 3:15:03

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/7/5 9:25:53

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11