案例 - 拖拽上传文件,生成缩略图
直接看效果
实现代码
<!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 开源协议。 功能特性 丰富的模块市场，后台一键快速安装 …...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险
C#入门系列【类的基本概念】：开启编程世界的奇妙冒险 嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...
Web后端基础(基础知识)
BS架构：Browser/Server，浏览器/服务器架构模式。客户端只需要浏览器，应用程序的逻辑和数据都存储在服务端。 优点：维护方便缺点：体验一般 CS架构：Client/Server，客户端/服务器架构模式。需要单独…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分：派生类构造函数与析构函数 当创建一个派生类对象时，基类成员是如何初始化的？ 1.当派生类对象创建的时候，基类成员的初始化顺序 …...
Ubuntu系统复制（U盘-电脑硬盘）
所需环境 电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...