案例 - 拖拽上传文件,生成缩略图
直接看效果
实现代码
<!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 开源协议。 功能特性 丰富的模块市场，后台一键快速安装 …...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...