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

原生js实现拖拽上传（拖拽时高亮上传区域）

news 文章来源：https://blog.csdn.net/qq_40314318/article/details/143327542 2025/1/16 20:17:25

文章目录

  • drop相关事件说明-MDN
  • 演示
  • 代码（.html)

drop相关事件说明-MDN

演示

在这里插入图片描述

代码（.html)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Drag Upload</title><style>html,body {height: 100%;width: 100%;}.drag-upload-box {width: 200px;height: 130px;border-radius: 6px;border: 2px dashed #ccc;overflow: hidden;display: flex;align-items: center;justify-content: center;cursor: pointer;}.drag-upload-box.guide {border-color: orange;}.drag-upload-box.available {border-color: green;}.drag-upload-box > * {/* 防止拖拽到 子元素导致触发 dragleave*/pointer-events: none;}.drag-upload-box .empty {color: #ccc;}.drag-upload-box .file-name:empty + .empty {display: unset;}.drag-upload-box .file-name + .empty {display: none;}.input-file {display: none;}.obstacle {width: 100%;height: 200px;background: #ccc;}</style>
</head><body><div id="root"><div id="upload" class="drag-upload-box"><input id="file" class="input-file" type="file"><span class="file-name"></span><span class="tips empty">点击/拖拽到此处上传文件</span></div><div class="obstacle no1">其他元素</div></div></body>
<script>const $ = selector => document.querySelector(selector)const addEvent = (element, event, handler) => element.addEventListener(event, handler)// 文件上传inputconst fileInput = $('#file')// 拖放区域const dragBox = $('#upload')const fileName = dragBox.querySelector('.file-name')const tips = dragBox.querySelector('.tips')// 两个标识；来判断当前鼠标是否在上传文件/body中。let inUploadBox = falselet inBody = false// 绑定拖拽事件addEvent(dragBox, 'dragenter', handlerEvents)addEvent(dragBox, 'dragover', handlerEvents)addEvent(dragBox, 'dragleave', handlerEvents)addEvent(dragBox, 'drop', handlerEvents)// 点击上传addEvent(dragBox, 'click', (e) => {fileInput.click()})// 选择文件回调addEvent(fileInput, 'change', () => {getFile(fileInput.files[0])})const light = {guide() {this.classList.add('guide')this.classList.remove('available')tips.innerText = '拖拽到此处'inUploadBox = false},available() {this.classList.add('available')this.classList.remove('guide')tips.innerText = '松开鼠标'inUploadBox = true},clearLight() {this.removeClass('guide', 'available')tips.innerText = '点击/拖拽到此处上传文件'inUploadBox = false},removeClass() {this.classList.remove(...arguments)return this}}Object.assign(dragBox, light)function handlerEvents(e) {// 阻止事件传播触发 body 的dragovere.stopPropagation()e.preventDefault()// 禁用dragover默认事件，否则会在浏览器中打开文件switch (e.type) {// 进入拖放区域case 'dragenter':dragBox.available()break// 离开拖放区域case 'dragleave':if (inBody) {dragBox.guide()} else {dragBox.clearLight()}break// 在拖拽区域内松开鼠标（拖放完成/放入文件）case 'drop':getFile(e.dataTransfer.files[0])dragBox.clearLight()inBody = falsebreakdefault:break}}// 获取到文件function getFile(file) {console.log(file)if (!file) {fileName.innerText = ''return}const fileSize = (file.size / (1024 * 1024)).toFixed(2) + 'MB'fileName.innerText = file.name + ' ' + fileSize// TODO: 上传、预览}/* 以上是正常拖拽上传部分，下面代码处理拖拽到body后的指引/处理 */const body = document.bodyaddEvent(body, 'dragenter', handlerOutEvents)addEvent(body, 'dragover', handlerOutEvents)addEvent(body, 'dragleave', handlerOutEvents)addEvent(body, 'drop', handlerOutEvents)function handlerOutEvents(e) {e.stopPropagation()e.preventDefault()switch (e.type) {case 'dragenter':// 拖拽到 body && 未到上传文件区域；高亮指引到上传区域dragBox.guide()inBody = truebreakcase 'dragover':breakcase 'dragleave':if (inUploadBox) {dragBox.removeClass('guide')}breakcase 'drop':dragBox.clearLight()inBody = falsebreakdefault:break}}
</script></html>

相关文章：

原生js实现拖拽上传（拖拽时高亮上传区域）

文章目录 drop相关事件说明-MDN演示代码&#xff08;.html) drop相关事件说明-MDN 演示 代码&#xff08;.html) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"…...

编程日记 2024/10/29 16:48:06

python道格拉斯算法的实现

废话不多说 直接开干 需要用到模块 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple math #对浮点数的数学运算函数 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple shapely #提供几何形状的操作和分析&#xff0c;如交集、并集、差集等 pip install -i …...

编程日记 2024/10/29 16:47:05

STM32的hal库中，后缀带ex和不带的有什么区别

在STM32的HAL&#xff08;硬件抽象层&#xff09;库中&#xff0c;后缀带“ex”和不带“ex”的文件及其包含的内容存在显著的区别。这些区别主要体现在功能扩展性、使用场景以及API的层次上。 一、功能扩展性 不带“ex”后缀的文件&#xff1a; 这些文件通常包含标准的、核心…...

编程日记 2024/10/29 16:44:03

可观测性三大支柱

目录 可观测性成熟度模型 可观测性三大支柱的具体定义如下 指标 日志 链路 可观测性成熟度模型 可观测性成熟度模型&#xff0c;是一种用于衡量和评估企业软件系统内部可观测性的框架或方法&#xff0c;同 时也是一种用于反馈企业可观测性体系建设成熟度水平的框架或方法…...

编程日记 2024/10/29 16:43:01

【银河麒麟高级服务器操作系统·实例分享】裸金属服务器开机失败分析及处理建议

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://documentkylinos.cn 现象描述 裸金属物理服务器开机卡在EFI stub页面…...

编程日记 2024/10/29 16:42:00

模型剪枝实操

文章目录 实验报告&#xff1a;模型剪枝在图像分类任务中的应用摘要实验方法数据集和预处理模型架构剪枝过程实验设置 实验效果性能对比详细分析 结论 实验报告&#xff1a;模型剪枝在图像分类任务中的应用 摘要 本实验通过模型剪枝技术&#xff0c;对一个图像分类模型进行压…...

编程日记 2024/10/29 16:40:56

网安学习路线！最详细没有之一！看了这么多分享网安学习路线的一个详细的都没有！

零基础小白&#xff0c;到就业&#xff01;入门到入土的网安学习路线&#xff01; 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了&#xff01; 我把自己报班的系统学习路线&#xff0c;整理拿出来跟大家分享了&#xff01;点击下图&#xff0c;福利&#xff01; …...

编程日记 2024/10/29 16:38:52

Ubuntu18.04安装vscode1.94.2失败安装vscode1.84.2

系统环境&#xff1a;Ubuntu18.04.6 LTS 自己先去vscode官网下载好最新版本的vscode1.94.2&#xff08;不下也行&#xff0c;反正最新版也用不了&#xff0c;哈哈&#xff09; 网址&#xff1a;Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code ed…...

编程日记 2024/10/29 16:32:45

Redis中Lua脚本的使用场景

Redis 中的 Lua 脚本可以用于多种场景&#xff0c;以下是一些常见的使用场景及其对应的 Java 实现示例。 通过使用 Lua 脚本&#xff0c;可以在 Redis 中实现复杂的逻辑和原子操作&#xff0c;同时利用 Java 客户端&#xff08;如 Spring Data Redis&#xff09;方便地执行这些…...

编程日记 2024/10/29 16:31:44

重工业数字化转型创新实践：某国家特大型钢铁企业如何快速落地基于实时数仓的数据分析平台

使用 TapData&#xff0c;化繁为简&#xff0c;摆脱手动搭建、维护数据管道的诸多烦扰&#xff0c;轻量替代 OGG, Kettle 等同步工具&#xff0c;以及基于 Kafka 的 ETL 解决方案&#xff0c;「CDC 流处理 数据集成」组合拳&#xff0c;加速仓内数据流转&#xff0c;帮助企业…...

编程日记 2024/10/29 16:29:40

【linux】手动启动sshd

安装openssh-server修改配置文件启动 以下是在常见的Linux系统中手动开启sshd服务的步骤&#xff1a; 1.安装openssh-server CentOS/RHEL系统 首先&#xff0c;以具有管理员权限的用户&#xff08;通常是root&#xff09;登录到系统。检查sshd服务是否已经安装。可以使用以…...

编程日记 2024/10/29 16:28:38

前端项目【本科期间】

1.基于博达网站群的申达办官方网站开发与维护 实习项目：校发展规划中心暨申请更名大学办公室官方网站 技术栈：HTML/CSS/Javascript 博达网站群的入门级指南 -CSDN博客博达网站群的入门级指南 -CSDN博客 网上少的较全的基于博达网站建设指南，CSDN相关内容综合指数NO有.1 …...

编程日记 2024/10/29 16:26:31

深度学习中的学习率调度:循环学习率、SGDR、1cycle 等方法介绍及实践策略研究

深度学习实践者都知道,在训练神经网络时,正确设置学习率是使模型达到良好性能的关键因素之一。学习率通常会在训练过程中根据某种调度策略进行动态调整。调度策略的选择对训练质量也有很大影响。 大多数实践者采用一些广泛使用的学习率调度策略,例如阶梯式衰减或余弦退火。这些…...

编程日记 2024/10/29 16:25:28

Python毕业设计-基于 Python flask 的前程无忧招聘可视化系统，Python大数据招聘爬虫可视化分析

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…...

编程日记 2024/10/29 16:24:27

Linux初阶——线程（Part1）

一、线程概念 1、如何理解线程 说到线程&#xff0c;那么我们就要回到进程了。 1.1. 再谈进程 对一个进程来说&#xff0c;它在内存中是这样的&#xff1a; 图1.1-a 其中一个 task_struct 独享一个进程地址空间和一个页表。 而线程其实和进程差不多&#xff0c;是这样的&…...

编程日记 2024/10/29 16:22:24

SpringBoot后端开发常用工具详细介绍——flyway数据库版本控制工具

文章目录 什么是flyway简介为什么要使用flyway 流程介绍整合springboot添加pom文件配置flyway向resource/db/migration添加sql文件 注意事项1. 迁移报错2. 迁移顺序 参考 什么是flyway 简介 为什么要使用flyway 我们在开发时往往会有这样一种情况&#xff1a; 进行软件开发…...

编程日记 2024/10/29 16:21:23

CSS揭秘：7. 伪随机背景

前置知识&#xff1a;CSS 渐变&#xff0c;5. 条纹背景&#xff0c;6. 复杂的背景图案 前言 本篇主要内容依然是关于背景的&#xff0c;无限平铺的背景会显得整齐美观&#xff0c;但又有些呆板&#xff0c;如何实现背景的多样性和随机性&#xff0c;是本篇的核心。 一、四种颜…...

编程日记 2024/10/29 16:20:21

SAP CODE DEMO：查找AL11 指定路径下文件中的内容

有时候需要查找某个具体的内容&#xff0c;在哪个文件内。数据量大的时候可以利用程序查找 选择界面&#xff1a; 路径&#xff0c;和文件名都可以模糊搜查 search string&#xff1a;你要查找的信息。 代码参考如下&#xff1a; report z00R010 NO STANDARD PAGE HEADING…...

编程日记 2024/10/29 16:19:17

【华为HCIP实战课程二十四】中间到中间系统协议IS-IS配置实战，网络工程师

一、IS-IS整体架构 将Level-1路由器部署在非骨干区域，Level-2路由器和Level-1-2路由器部署在骨干区域。 每一个非骨干区域都通过Level-1-2路由器与骨干区域相连！ 1、在IS-IS中，每个链路可以属于不同的区域，OSPF中每个链路属于同一个区域 2、在IS-IS中，单个区域没有物理…...

编程日记 2024/10/29 16:18:14

【工具】新手礼包之git相关环境包括中文的一套流程{收集和整理}，gitlab的使用

【工具】新手礼包之git相关环境包括中文的一套流程{收集和整理} git Git 详细安装教程&#xff08;详解 Git 安装过程的每一个步骤&#xff09; TortoiseGit 【TortoiseGit】TortoiseGit安装和配置详细说明...

编程日记 2024/10/29 16:17:12

篇章十一 打包构建工具

文章目录 一、gulp1. 流2. gulp 的作用3. gulp 的安装、检测和卸载 二、webpack1. 打包样式资源2. 打包 html 资源3. 打包图片资源4. 压缩 html 代码5. 生产环境基本配置 三、vite 打包构建工具&#xff0c;都是依赖于 node 环境进行开发&#xff0c;底层封装的内容就是 node 里…...

编程日记 2024/10/29 16:15:09

青少年编程与数学 02-002 Sql Server 数据库应用 06课题、数据库操作

青少年编程与数学 02-002 Sql Server 数据库应用 06课题、数据库操作 课题摘要:一、数据库的文件组成二、系统数据库三、创建数据库四、数据库配置1. 修改数据库文件大小和增长设置2. 添加或移除数据文件3. 设置数据库选项4. 配置数据库的恢复模型5. 管理数据库的访问权限6. 使…...

编程日记 2024/10/29 16:14:08

MacOS下载安装Logisim（图文教程）

本章教程主要介绍如何在MacOS系统中安装Logisim。 一、Logisim是什么？ Logisim是一个用于电子逻辑门电路模拟的教育工具软件。它允许用户通过图形界面构建和测试复杂的数字逻辑电路，如加法器、解码器、编码器、寄存器、内存等，从而帮助学生理解计算机硬件的工作原理。 二、如…...

编程日记 2024/10/29 16:11:00

Flink CDC系列之：调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案

Flink CDC系列之&#xff1a;调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案 准备准备 Flink Standalone 集群准备 docker compose为 MySQL 准备记录使用 Flink CDC CLI 提交作业 同步架构和数据更改路由变更清理 本教程将展示如何使用 Flink CDC 快速构建从 MySQ…...

编程日记 2024/10/29 16:08:58

一次元空间FullGC导致OOM问题分析

原文&#xff0c;作者&#xff1a;kkyeer 原文需要翻墙&#xff0c;所以转载。 现象 观测平台告警&#xff1a;FullGC次数大于阈值&#xff0c;5分钟内大于11次&#xff0c;频次大概1-2周有一次 告警后服务概率性会自动恢复&#xff0c;控制台打印 Exception: java.lang.OutOf…...

编程日记 2024/10/29 16:05:46

Web前端开发工具和依赖安装

各种安装&#xff1a; node.js https://nodejs.org/zh-cn/ 安装完node.js 可以使用npm&#xff0c;npm跟随nodejs一起安装 node --version 查看已安装node.js的版本&#xff0c;确认是否安装nodejs npm -v 查看npm版本npm install <Module Name> 安装模块 npm insta…...

编程日记 2024/10/29 16:01:40

【学习心得】远程root用户访问服务器中的MySQL8

一、Ubuntu下的MySQL8安装 在Ubuntu系统中安装MySQL 8.0可以通过以下步骤进行1. 更新包管理工具的仓库列表&#xff1a; sudo apt update 2. 安装MySQL 8.0&#xff0c;root用户默认没有密码&#xff1a; sudo apt install mysql-server sudo apt install mysql-client 【…...

编程日记 2024/10/29 16:00:39

lust变频器维修电梯变频器CDD34.014.W2.1LSPC1

LUST伺服在安装时须注意&#xff0c;不可有任何的铁屑、螺丝、导线等掉人驱动器内。在安装完成后应作基本的检测动作&#xff0c;如对地阻抗&#xff0c;和短路检测等。 所有的安装及使用事项需要符合安全规定&#xff0c;并且也需要符合当地的相关规定和灾害预防措施。DC BUS…...

编程日记 2024/10/29 15:58:36

跨越地域限制：在线原型设计软件的自由与便捷

网络原型设计软件因其便捷性和灵活性&#xff0c;在现代设计工作中扮演着至关重要的角色。与传统的桌面端软件相比&#xff0c;网络原型设计工具无需安装&#xff0c;不受地域限制&#xff0c;且兼容各种操作系统&#xff0c;无论是Linux、Solaris、Mac还是Windows&#xff0c;…...

编程日记 2024/10/29 15:57:35

flash-waimai：高仿饿了么外卖平台，使用他轻松打造自己的外卖平台

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 flash-waimai 是一个完整的外卖平台解决方案&#xff0c;包括手机端、后台管理端和 API 服务。该项目仿照了饿了么的外卖服务&#xff0c;为用户提供了一个…...

编程日记 2024/10/29 15:54:27

海宏集团网站建设/网站排名英文

正题 这题其实想想很简单。&#xff08;据说是老师找我们试水的 首先枚举一个关键点&#xff0c;因为我们知道分割这个多边形的最优方案一定是经过关键点的。 把顶点和关键点按照极角排序&#xff0c;做这个极角排序的方法&#xff0c;就是如果一个y<0&#xff0c;那么让x-x…...

编程日记 2025/1/16 19:37:24

随州网络推广/独立站seo搜索优化

今天&#xff0c;开学了&#xff01;寒假后&#xff0c;学生们又回到校园开始新学期的学习。(资料图片)本报讯(记者 陈玉珍)在度过一个愉快短暂的寒假后&#xff0c;学生们又回到校园开始新学期的学习&#xff0c;今日&#xff0c;泉州市各中小学开学并正式上课。开学的第一天&…...

编程日记 2025/1/16 17:17:23

怎么做应援网站/seo流量优化

1、使用uni-swiper-dot 轮播图指示点 地址&#xff1a;插件地址. 2、使用HBuilderX导入组件 3、按照官方文档使用&#xff0c; 4、文档中并没有说自动轮播&#xff0c;添加属性autoplay"true"就可以了。解决如下 <swiper class"swiper-box" change&q…...

编程日记 2025/1/16 16:29:53

做网站的动态图片/苏州网站优化公司

文章目录一、循环语句1.1 for循环语句1.1.1 for语句的结构1.1.2 for语句应用示例1.2 while循环语句1.3 until循环语句1.3.1 until语句的结构二、 Shell函数2.1 Shell函数2.1 函数应用示例2.2 函数的作用范围2.3 函数的参数2.4 递归函数三、 Shell数组3.1 Shell数组3.2 Shell脚本…...

编程日记 2025/1/16 15:13:37

jsp网站开发具体步骤/百度竞价是什么意思?

作者 | cxapython来源 | Python学习开发&#xff08;ID&#xff1a;python3-5&#xff09;pdb是Python自带的一个包&#xff0c;为Python程序提供了一种交互的源代码调试功能&#xff0c;主要特性包括设置断点、单步调试、进入函数调试、查看当前代码、查看栈片段、动态改变变量…...

编程日记 2025/1/16 13:37:23

毕业设计代做网站推荐/杭州seo软件

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼package testOfProject;import javax.swing.*;import java.awt.*;import java.awt.event.*;public class ThreadView extends JFrame implements ActionListener {JPanel jp1;JButton jb1, jb2;public static void main(String[] a…...

编程日记 2025/1/16 12:41:08