案例 - 拖拽上传文件,生成缩略图
直接看效果
实现代码
<!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 开源协议。 功能特性 丰富的模块市场，后台一键快速安装 …...
如何用强化学习高效解决复杂组合优化问题：RL4CO完整实战指南
如何用强化学习高效解决复杂组合优化问题：RL4CO完整实战指南 【免费下载链接】rl4co A PyTorch library for all things Reinforcement Learning (RL) for Combinatorial Optimization (CO) 项目地址: https://gitcode.com/gh_mirrors/rl/rl4co 你是否曾为物…...
别再傻傻分不清！一张图看懂IDS、IPS、防火墙、网闸这些安全设备到底该放哪儿
企业网络安全设备部署实战指南：从拓扑设计到纵深防御 第一次接触企业级网络拓扑时，那些密密麻麻的连线图和各式各样的安全设备图标总让人望而生畏。作为刚入行的网络安全工程师，最常遇到的困惑莫过于：IDS该放在核心交换机旁边还是…...
不用微软商店！5分钟搞定Win10 OpenSSH离线安装（附GitHub下载指南）
绕过微软商店：Win10 OpenSSH离线安装全攻略 每次在Windows 10的可选功能里尝试安装OpenSSH时，那个转圈圈进度条是不是总让你提心吊胆？微软商店的安装方式不仅速度慢，还经常莫名其妙失败。作为技术爱好者，我们完全有更…...
告别手动刷UDS！用CANoe.Diva Demo工程5分钟上手诊断自动化测试
告别手动刷UDS！用CANoe.Diva Demo工程5分钟上手诊断自动化测试 还在为手动执行UDS诊断测试而烦恼？每次测试都要重复输入相同的指令，既耗时又容易出错。CANoe.Diva的自动化测试功能可以彻底改变这一现状，而它的Demo工程更是新手快…...
终极破解：3分钟掌握城通网盘高速下载的完整免费方案
终极破解：3分钟掌握城通网盘高速下载的完整免费方案 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 还在为城通网盘几十KB/s的蜗牛速度而烦恼？面对数GB的大文件需要等待数小时甚…...
Anthropic发布Claude Opus 4.7：性能显著提升，多项测评领先，多方面功能更新
Anthropic发布Claude Opus 4.7：性能显著提升，多项测评领先，多方面功能更新智东西4月17日报道，昨天夜间，Anthropic发布新一代旗舰大模型Claude Opus 4.7。该模型在高级软件工程、高分辨率图像处理能力方面显著提升&…...
从Java 8到Java 17：一次企业级项目升级的实战避坑指南
1. 为什么企业级项目需要升级到Java 17？ Java 17作为最新的长期支持（LTS）版本，相比Java 8带来了显著的性能提升和现代化特性。对于企业级项目来说，升级不仅仅是追求新版本，更是为了获得更好的安全性、稳定性…...
Arduino TFT_eSPI库进阶玩法：用Sprite（精灵图）制作流畅动画和动态仪表盘
Arduino TFT_eSPI库进阶玩法：用Sprite（精灵图）制作流畅动画和动态仪表盘 当你在Arduino项目中使用TFT屏幕时，是否遇到过屏幕闪烁、刷新缓慢的问题？特别是在制作动态界面或动画效果时，直接操作屏幕往往会导致…...
3步搞定Unity游戏AI翻译：XUnity.AutoTranslator新手完全指南
3步搞定Unity游戏AI翻译：XUnity.AutoTranslator新手完全指南 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 还在为看不懂的外语Unity游戏发愁吗？想轻松玩转全球游戏却卡在语言关&…...
刚上大学为啥要先学C语言？一文给你讲明白
嘿，大家好！是不是有好多才踏入大学校园大门的小伙伴们，所面对的第一门与编程相关的课程便是 C 语言？其后心里兴许满是疑惑：为何偏偏是 C 语言？如今 Python、Java 这般热门流行，去学习这个堪称“…...