案例 - 拖拽上传文件,生成缩略图

直接看效果

实现代码

<!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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/184685.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ecal基于wifi下跨机通讯

4. Network configuration — Eclipse eCAL™ UDP无法通信&#xff0c;改成TCP配置可以通信&#xff0c;但是没有重连。 Ecal版本&#xff1a;5.12稳定 WIFI连接eCAL Cloud Configuration Not Sending/Receiving Data Correctly Issue #650 eclipse-ecal/ecal GitHub 一开始…

Spring笔记(四)(黑马)(web层解决方案-SpringMVC)

01、Spring MVC 简介 1.1 SpringMVC概述 SpringMVC是一个基于Spring开发的MVC轻量级框架&#xff0c;Spring3.0后发布的组件&#xff0c;SpringMVC和Spring可以无 缝整合&#xff0c;使用DispatcherServlet作为前端控制器&#xff0c;且内部提供了处理器映射器、处理器适配器…

RflySim | 滤波器设计实验二

本讲是关于无人机滤波器&#xff0c;其中包括无人机滤波器简介、测量原理、线性互补滤波器设计、线性互补滤波器参数分析、卡尔曼滤波器设计等。 滤波器设计实验2 卡尔曼滤波器是一种递推线性最小方差估计算法&#xff0c;它的最优估计需满足以下三个条件&#xff1a; 1&#…

LCD充气桨板冲浪板充气泵方案——pcba/芯片方案

LCD充气桨板冲浪板充气泵规格书 一、主要功能介绍&#xff1a; 1、开机默认显示上次设定气压值&#xff0c; 2、测量范围&#xff1a;0~22psi、测量精度&#xff1a;0.5PSI 3、分辨率&#xff1a;0.01 PSI 4、温度范围&#xff1a;-10至50度摄氏 5、5个按键&#xff1a;PSI键、…

python自动化测试(十一):写入、读取、修改Excel表格的数据

目录 一、写入 1.1 安装 xlwt 1.2 增加sheet页 1.2.1 新建sheet页 1.2.2 sheet页写入数据 1.2.3 excel保存 1.2.4 完整代码 1.2.5 同一坐标&#xff0c;重复写入 二、读取 2.1 安装读取模块 2.2 读取sheet页 2.2.1 序号读取shee页 2.2.2 通过sheet页的名称读取she…

快来看看如何拿下7+干湿结合生信思路。赶紧拿起笔记本

今天给同学们分享一篇生信文章“CENPF/CDK1 signaling pathway enhances the progression of adrenocortical carcinoma by regulating the G2/M-phase cell cycle”&#xff0c;这篇文章发表在J Transl Med期刊上&#xff0c;影响因子为7.4。 结果解读&#xff1a; CENPF在AC…

易云维®工厂能耗管理平台系统方案,保证运营质量,推动广东制造企业节能减排

我国《关于完整准确全面贯彻新发展理念推进碳达峰碳中和工作的实施意见》出台&#xff0c;提出了推进碳达峰碳中和工作的总体目标。到2025年&#xff0c;广东具备条件的地区、行业和企业率先实现碳达峰&#xff0c;为全省实现碳达峰、碳中和奠定坚实基础&#xff1b;2030年前实…

Java算法(二):数组元素求和(元素个位和十位不能是 7 ,且只能是偶数)

java算法&#xff08;二&#xff09; 需求&#xff1a; ​ 有这样一个数组&#xff1a; 元素是&#xff1a;{68, 27, 95, 88, 171, 996, 51, 210} ​ 求出该数组中满足要求的元素和 ​ 要求是&#xff1a; 求和的元素各位和十位都不能是 7 &#xff0c;并且只能是偶数 packa…

Android 深色模式切换适配

在Android11上测试 1&#xff0c;把需要适配的资源文件复制一份后缀加上-night&#xff0c;里面就放置变主题后的资源 2&#xff0c;两个主题一个白&#xff0c;一个黑&#xff0c;分别放置在对应的valuse-styles.xml中 <style name"Theme.LaserMachPor" parent&…

【delphi】中 TNetHTTPClient 注意事项

一、TNetHTTPClient 是什么&#xff1f; 用于管理 HTTP 客户端的组件。相当于indy中的TidHTTP控件&#xff0c;是实现HTTP请求的客户端控件。 二、TNetHTTPClient 需要注意什么&#xff1f; 需要注意的是几个Timeout&#xff0c;因为我们使用TNetHTTPClient控件的时候&#x…

046_第三代软件开发-虚拟屏幕键盘

第三代软件开发-虚拟屏幕键盘 文章目录 第三代软件开发-虚拟屏幕键盘项目介绍虚拟屏幕键盘 关键字&#xff1a; Qt、 Qml、 虚拟键盘、 qtvirtualkeyboard、 自定义 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object L…

JavaEE平台技术——MyBatis

JavaEE平台技术——MyBatis 1. 对象关系映射框架——Hibernate、MyBatis2. 对象关系模型映射3. MyBatis的实现机制4. MyBatis的XML定义5. Spring事务 在观看这个之前&#xff0c;大家请查阅前序内容。 &#x1f600;JavaEE的渊源 &#x1f600;&#x1f600;JavaEE平台技术——…

Oracle(13)Maintaining Data Integrity

目录 一、基础知识 1、Data Integrity 数据库的完整性 2、Types of Constraints 约束类型 3、Constraint States 约束状态 4、Guidelines for Constraints 约束准则 二、基础操作 1、Enabling Constraints 启用约束 2、命令方式创建约束 3、修改表创建的约束 4、删除约…

[vue-router]vue3.x Hash路由前缀问题

[vue-router]vue3.x Hash路由前缀问题 问题描述问题分析 问题描述 是在本地开发时&#xff0c;使用的HASH路由&#xff0c;然后在偶然的情况下在/#/前添加了前缀&#xff0c;发现不影响本地的路由的使用&#xff1f;&#xff1f;&#xff1f;&#xff01;&#xff01;&#xf…

2023年11月数据库流行度最新排名

点击查看最新数据库流行度最新排名&#xff08;每月更新&#xff09; 2023年11月数据库流行度最新排名 TOP DB顶级数据库索引是通过分析在谷歌上搜索数据库名称的频率来创建的 一个数据库被搜索的次数越多&#xff0c;这个数据库就被认为越受欢迎。这是一个领先指标。原始数…

《LeetCode力扣练习》代码随想录——数组(长度最小的子数组---Java)

《LeetCode力扣练习》代码随想录——数组&#xff08;长度最小的子数组—Java&#xff09; 刷题思路来源于 代码随想录 209. 长度最小的子数组 滑动窗口——O(n) class Solution {public int minSubArrayLen(int target, int[] nums) {if(nums.length1){return nums[0]>targ…

Bash 4关联数组:错误“声明:-A:无效选项”

Bash 4 associative arrays: error “declare: -A: invalid option” 就是bash版本太低 1.先确定现在的版本 bash -version 我的就是版本太低 升级新版本bash4.2 即可 升级步骤 1.下载bash-4.2wget http://ftp.gnu.org/gnu/bash/bash-4.2.tar.gz 2. 下载完成解压 tar -zxvf…

【FI】FB02中Coding Block字段如何设置为可修改

本文基于S/4 HANA 2022 关于FB02下会计凭证行上的可更改字段的控制&#xff0c;以前以为只受“凭证明细行更变规则”&#xff08;OB32&#xff09;的影响。 今天碰到了Coding Block字段的情况&#xff0c;它不受OB32的影响&#xff0c;而是受表TCOBX控制。 如何确认该字段是Cod…

Python批量导入及导出项目中所安装的类库包到.txt文件(补充)

Python批量导入及导出项目中所安装的类库包到.txt文件 生成requirements文件 建议使用&#xff0c;该方式形成文档最简洁&#xff1a; pip list --formatfreeze > requirements.txt

jenkins Java heap space

jenkins Java heap space&#xff0c;是内存不够。 两个解决方案&#xff1a; 一&#xff0c;修改配置文件 windows系统中&#xff0c;找到Jenkins的安装路径&#xff0c; 修改jenkins.xml 将 -Xmx256m 改为 -Xmx1024m 或者更大 重启jenkins服务。 二&#xff0c;jenkins增…