案例 - 拖拽上传文件,生成缩略图
直接看效果
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拖拽上传文件</title><style>/* 拖拽容器 */.box-container {position: relative;display: flex;justify-content: center;align-items: center;border: 1px dashed black;border-radius: 7px;width: 200px;height: 100px;}.box1 {position: absolute;width: 10px;height: 50px;background: black;}.box2 {position: absolute;width: 50px;height: 10px;background: black;}.dropbox {position: absolute;opacity: 0;width: 100%;height: 100%;line-height: 100px;text-align: center;font-size: 20px;font-weight: 900;background: rgb(0, 0, 0, 0.3);}/* 图片容器 */.img-container {width: 500px;height: 500px;border: 1px solid black;border-radius: 10px;box-shadow: 2px 2px 20px 3px black;overflow: auto;}.img-item {float: left;width: 50px;height: 50px;margin: 5px;border: 1px solid black;border-radius: 10px;}</style>
</head><body><div class="box-container"><div class="box1"></div><div class="box2"></div><div class="dropbox">拖拽上传文件</div></div><br><hr><br><div class="img-container"></div></body>
<script>let dropbox = document.querySelector('.dropbox')dropbox.addEventListener("dragenter", dragenter, false)dropbox.addEventListener("dragover", dragover, false)dropbox.addEventListener("drop", drop, false)dropbox.addEventListener('dragleave', dragleave, false)function dragenter(e) {e.stopPropagation();e.preventDefault();}// 进入拖拽容器function dragover(e) {e.stopPropagation();e.preventDefault();dropbox.style.cssText = `opacity: 1;`}// 离开拖拽容器function dragleave(e) {e.stopPropagation();e.preventDefault();dropbox.style.cssText = `opacity: 0;`}// 将拖拽标签放在拖拽容器上(鼠标松开)function drop(e) {e.stopPropagation();e.preventDefault();dropbox.style.cssText = `opacity: 0;`const dt = e.dataTransfer;const files = dt.files;console.log(dt.files);handleFiles(files);}let imgContainer = document.querySelector('.img-container')/** * handleFiles() 处理文件列表* * @param files 文件列表* @return */function handleFiles(files) {for (const file of files) {if (!file.type.startsWith("image")) {continue}const img = document.createElement('img')img.classList.add('img-item')// 读取文件流const reader = new FileReader()reader.onload = (e) => {img.src = e.target.resultimgContainer.appendChild(img)}reader.readAsDataURL(file)}}</script></html>相关文章：
案例 - 拖拽上传文件,生成缩略图
直接看效果 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>拖拽上传文件</title>&l…...
PHP 使用递归方式 将其二维数组整合为层级树 其中层级id 为一个uuid的格式 造成的诡异问题 已解决
不啰嗦 直接上源代码 <?php function findChildren($list, $p_id){$r array();foreach ($list as $k > $item) {if ($item[fid] $p_id) {unset($list[$k]);$length count($r);$r[$length] $item;if ($t findChildren($list, $item[id])) {$r[$length][children] …...
rv1126-rv1109-添加分区，定制固件，开机挂载功能
===================================================================== 修改分区： 这里是分区的txt文件选择； 这里是分区的划分，我这里回车了，方便看 FIRMWARE_VER: 8.1 MACHINE_MODEL: RV1126 MACHINE_ID: 007 MANUFACTURER: RV1126 MAGIC: 0x5041524B ATAG: 0x00200…...
一台电脑使用多个gitee账号，以及提交忽略部分文件
目录 编辑 一：前言 二：解决方法 三：提交gitee时忽略文件 一：前言 在开发中，我们拥有不止一个 gitee 账号，通常而言一个是公司的，一个是私人的。有时候我们在公司写了一些自己的东西&#…...
解析邮件文本内容； Mime文本解析； MimeStreamParser； multipart解析
原始文本 ------_Part_46705_715015081.1699589700255 Content-Type: text/html;charsetUTF-8 Content-Transfer-Encoding: base64PGh0bWwCiAgICA8aGVhZD4KICAgICAgICA8bWV0YSBodHRwLW VxdWl2PSJDb250ZW50LVR5cGUiIGNvbnRlbnQ9InRleHQvaHRt bDsgY2hhcnNldD1VVEYtOCICiAgICAgIC…...
获取请求IP以及IP解析成省份
某些业务需要获取请求IP以及将IP解析成省份之类的，于是我写了一个工具类，可以直接COPY /*** IP工具类* author xxl* since 2023/11/9*/ Slf4j public class IPUtils {/*** 过滤本地地址*/public static final String LOCAL_ADDRESS "127.0.0.1&quo…...
YOLOv8-seg改进：复现HIC-YOLOv5，HIC-YOLOv8-seg助力小目标分割
🚀🚀🚀本文改进：HIC-YOLOv8-seg：1)添加一个针对小物体的额外预测头，以提供更高分辨率的特征图2）在backbone和neck之间采用involution block来增加特征图的通道信息；3）在主干网末端加入 CBAM 的注意力机制； 🚀🚀🚀HIC-YOLOv8-seg小目标分割检测&复杂场景…...
vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower
vscode 终端进程启动失败: shell 可执行文件“C:\Windows\System32\WindowsPower 第一次用vscode，然后遇到这个问题，在设置里搜索 terminal.integrated.defaultProfile.windows 将这里的null改成"Command Prompt" 重启就可以了...
【中间件篇-Redis缓存数据库02】Redis高级特性和应用(慢查询、Pipeline、事务、Lua)
Redis高级特性和应用(慢查询、Pipeline、事务、Lua) Redis的慢查询 许多存储系统（例如 MySQL)提供慢查询日志帮助开发和运维人员定位系统存在的慢操作。所谓慢查询日志就是系统在命令执行前后计算每条命令的执行时间，当超过预设阀值,就将这条命令的相关…...
栈 和 队列
什么是栈? 一种特殊的线性表，只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶，另一端称为栈底。栈中的数据元素遵守后进先出（LIFO - Last In First Out）的原则。 从数据结构的角度来看&…...
【推荐】一款AI写作大师、问答、绘画工具-「智元兔 AI」
在当今技术飞速发展的时代，越来越多的领域开始应用人工智能（Artificial Intelligence，简称AI）。其中，AI写作工具备受瞩目，备受推崇。在众多的选择中，智元兔AI是一款在笔者使用过程中非常有帮助的…...
阿里云付费用户破100万 用户规模亚洲最大
导读阿里巴巴集团公布2018财年第一季度财报，阿里云达到一个重要里程碑，云计算付费用户数量首次超过100万，成为亚洲首家达到百万级用户规模的云计算公司。同时，企业级市场被云计算人工智能等新技术全面激活，推动该季度营…...
人工智能基础——Python：Matplotlib与绘图设计
人工智能的学习之路非常漫长，不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心，我为大家整理了一份600多G的学习资源，基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…...
Ubuntu 配置 Github 的 SSH keys
先进入已有的 Git 目录或使用新建的一个 Git 仓库下。 设置 Github 用户名和邮箱： $ git config --global user.name [Github用户名] $ git config --global user.email [Github认证邮箱]生成 SSH 密钥文件： $ ssh-keygen -t rsa -C [Github认证邮箱]…...
){kind=spacer}
Flink—— Flink Data transformation(转换)
Flink数据算子转换有很多类型，各位看官看好，接下来，演示其中的十八种类型。 1.Map（映射转换） DataStream → DataStream 将函数作用在集合中的每一个元素上,并返回作用后的结果，其中输入是一个数据流&…...
前端读取文件当文件选择相同文件名的文件，内容不会变化
前端读取文件当文件选择相同文件名的文件，内容不会变化 今天遇到个奇怪的bug，使用打开文件，并选择文件时，正常情况会读取文件信息。 但是如果先选择相同的文件名，则内容不会发生变化。 先说结论 只要不使用事件中e…...
PHP 服装销售管理系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp
一、源码特点 PHP 服装销售管理系统是一套完善的web设计系统mysql数据库 ，对理解php编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。 php服装销售管理系统1 二、功能介绍 (1)员工管理：对员工信息…...
用于图像处理的高斯滤波器 （LoG） 拉普拉斯
一、说明 欢迎来到拉普拉斯和高斯滤波器的拉普拉斯的故事。LoG是先进行高斯处理，继而进行拉普拉斯算子的图像处理算法。用拉普拉斯具有过零功能，实现边缘岭脊提取。 二、LoG算法简述 在这篇博客中，让我们看看拉普拉斯滤波器和高斯滤波器的拉普…...
【h5 uniapp】 滚动 滚动条，数据跟着变化
uniapp项目 需求： 向下滑动时，数据增加，上方的日历标题日期也跟着变化 向上滑动时，上方的日历标题日期跟着变化 实现思路： 初次加载目前月份的数据 以及下个月的数据 this.getdate()触底加载 下个月份的数据 onReach…...
ModStartBlog v8.5.0 评论开关布局调整，系统后台全面优化
ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用，支持后台一键快速安装，让开发者能快的实现业务功能开发。 系统完全开源，基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场，后台一键快速安装 …...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好，我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题，统一使用 二重复合函数： z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式（偏导…...
UE5 音效系统
一.音效管理 音乐一般都是WAV,创建一个背景音乐类SoudClass,一个音效类SoundClass。所有的音乐都分为这两个类。再创建一个总音乐类，将上述两个作为它的子类。 接着我们创建一个音乐混合类SoundMix，将上述三个类翻入其中，通过它管理每个音乐…...
C++11 constexpr和字面类型：从入门到精通
文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...
uniapp获取当前位置和经纬度信息
1.1. 获取当前位置和经纬度信息（需要配置高的SDK） 调用uni-app官方API中的uni.chooseLocation()，即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...
LeetCode 2894.分类求和并作差
目录 题目： 题目描述： 题目链接： 思路： 思路一详解（遍历 判断）： 思路二详解（数学规律/公式）： 代码： Java思路一（遍历 判断&a…...
.Net Framework 4/C# 面向对象编程进阶
一、继承 （一）使用继承 子类可以继承父类原有的属性和方法，也可以增加原来父类不具备的属性和方法，或者直接重写父类中的某些方法。 C# 中使用“：”来表示两个类的继承。子类不能访问父类的私有成员，但是可以访问其公有成员，即只要使用 public 声明类成员，就既可以让一…...
设备健康管理的范式革命：中讯烛龙全链路智能守护系统
当工业设备的“亚健康”状态导致隐性产能损失高达23%时，中讯烛龙推出 “感知-诊断-决策-闭环”四位一体解决方案，让设备全生命周期健康管理成为企业增长的隐形引擎。 一、行业痛点：传统运维的三大断层 1. 健康感知盲区 某风电场因无法捕…...
华为云Flexus+DeepSeek征文｜华为云Flexus服务器dify平台通过自然语言转sql并执行实现电商数据分析
目录 前言 1 华为云Flexus服务器部署Dify平台 1.1 华为云Flexus服务器一键部署Dify平台 1.2 设置账号登录Dify，进入平台 2 构建自然语言转SQL并执行的应用 2.1 创建应用并启动工作流设计 2.2 应用框架设计 2.3 自然语言转SQL模块详解 2.4 代码执行模块实现…...