案例 - 拖拽上传文件
直接看效果
实现代码
<!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…...
github 上传代码报错 fatal: Authentication failed for ‘xxxxxx‘
问题 今天一时兴起创建了个 github 新仓库，首次上传本地代码时，遇到了一个报错。本来以为是账号密码的问题，搞了好几次，发现都没错的情况下还是上传不上去。目测判断是认证相关问题，具体报错信息如下： rem…...
Linux虚拟网络设备之bridge
继前两篇介绍了tun/tap和veth之后，本篇将介绍Linux下常用的一种虚拟网络设备，那就是bridge(桥)。 Linux ip netns 命令-CSDN博客 veth-pair,netns-CSDN博客 图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN_veth 转发 有拷贝-C…...
最后一个大更新！Win11 2023正式发布：Copilot终于来了
美国当地时间周二， 微软正式宣布为所有符合条件的Windows 11电脑发布Windows 11 2023更新(Windows 11 23H2)。 考虑到微软计划在2024年发布下一代Windows(可能是Windows 12)，这也使得23H2成为Windows 11的最后一个重大更新。 此次更新的重点就是AI功能&a…...
pandas教程：Reading and Writing Data in Text Format (以文本格式读取和写入数据)
文章目录 Chapter 6 Data Loading, Storage, and File Formats（数据加载，存储，文件格式）6.1 Reading and Writing Data in Text Format (以文本格式读取和写入数据)1 Reading Text Files in Pieces（读取一部分文本&…...
软考高级系统架构设计师系列之：软考高级系统架构设计师论文专题
软考高级系统架构设计师系列之：软考高级系统架构设计师论文专题 一、论文相关内容二、论文专题大纲三、论文考试方式四、历年真题汇总分析五、论文常见问题六、论文评分标准七、搭建论文万能模版八、论文万能模版公式九、搭建论文万能模版—摘要十、搭建论文万能模版—背景十一…...
目标检测中的评价指标
目标检测中的评价指标 将检测目标分为正样本和负样本。 真阳性（true positives , TP） : 正样本被正确识别为正样本。 假阳性（false positives, FP）: 负样本被错误识别为正样本。 假阴性（false negatives, FN&#…...
【AI编程】ai编程插件汇总iFlyCode、codegeex
1、iFlyCode 开发公司：讯飞 支持IDE: VS Code、IntelliJ IDEA、CLion、PyCharm、WebStorm 支持语言: Python、JavaScript、C、Java 下载地址：https://iflycode.xfyun.cn/ iFlyCode 快捷键列表： Tab 采纳建议 Esc 拒绝建议 Alt\ 主动…...
算法通关村第八关|黄金挑战|二叉树的最近公共祖先
二叉树的最近公共祖先 找p和q就行，找不到p和q的节点就返回null，找到的就层层返回p或q，其他的还是返回null。直到某一层的left和right都不为null说明得到了最近公共节点，再将这个节点层层返回。如果p和q存在祖先和子节点的关系&am…...
亚马逊云科技产品测评』活动征文｜通过使用Amazon Neptune来预测电影类型初体验
文章目录 福利来袭Amazon Neptune什么是图数据库为什么要使用图数据库什么是Amazon NeptuneNeptune 的特点 快速入门环境搭建notebook 图神经网络快速构建加载数据配置端点Gremlin 查询清理 删除环境S3 存储桶删除 授权声明：本篇文章授权活动官方亚马逊云科技文章转…...
【获奖论文】2023年数学建模国赛优秀获奖论文
论文篇幅过长，本文仅展示少部分；共计14篇完整PDF获奖论文。 关注在微信公众号：数学建模BOOM，回复“2023国赛”获取。 注意！是在公众号回复，不是在b站。 优秀论文部分内容展示： 更多A~E题的完…...
美团三年，总结的10条血泪教训
在美团的三年多时光，如同一部悠长的交响曲，高高低低，而今离开已有一段时间。闲暇之余，梳理了三年多的收获与感慨，总结成10条，既是对过去一段时光的的一个深情回眸，也是对未来之路的一份期许。 …...
【CSP认证考试】202309-1：坐标变换（其一）100分解题思路＋代码
解题思路 暴力解决，不考虑时空开销就一直用for循环也可以做出来。按照题目意思输入两个数组，然后将第一个输入的数组的x部分累加起来记作x，再将y部分累加起来记作y。再将第二个数组的x部分都加上x，y部分加上y。最后输出第二个数组…...
剩余参数和展开运算符的区别
一、剩余参数 剩余参数语法允许在函数定义时，将多个参数表示为一个参数数组。 使用剩余参数，可以将不定数量的参数作为一个数组接收，并在函数内部对其进行操作。剩余参数使用三个点 (…) 加上一个参数名来表示，通常用于函数的最后…...
ES6的基础用法
本文会着重讲解es6，帮助大家熟悉es6和掌握es6的写法 1，let 没有变量提升，使用变量在变量定义之前，这点和var有很大区别 不允许重复声明 只在块级作用域里有效 暂时性死区 console.log(a) //报错，因为在未定义前调用l…...
standard_init_linux.go:211: exec user process caused “exec format error“
在使用docker搭建hue的过程中出现了如下错误: standard_init_linux.go:211: exec user process caused "exec format error"docker日志 [roots14 bin]# docker logs fa5b1c4e0614 standard_init_linux.go:211: exec user process caused "exec format error&q…...
python的format函数的用法及实例
目录 1.format函数的语法及用法 （1）语法：{}.format() （2）用法：用于格式化字符串。可以接受无限个参数，可以指定顺序。返回结果为字符串。 2.实例 （1）不设置位置&…...
BigDecimal 类型的累加操作
BigDecimal 累加操作 .add操作...
基于单片机的土壤温湿度控制系统
欢迎大家点赞、收藏、关注、评论啦 ，由于篇幅有限，只展示了部分核心代码。 技术交流认准下方 CSDN 官方提供的联系方式 文章目录 概要 一、温湿度控制系统的整体规划2.3系统的总体构架 二、温度湿度控制系统硬件设计3.1系统硬件概述 三、 温湿度系统软件…...
服务器数据库中了elbie勒索病毒怎么办，elbie勒索病毒解密，数据恢复
网络技术的不断成熟，为企业的生产运营提供了强有力的支撑，但是，随之而来的网络安全威胁也不断增加。云天数据恢复中心陆陆续续接到很多企业的求助，企业的服务器数据库e遭到了elbie勒索病毒攻击，导致企业计算机系统瘫痪…...
接口测试及接口测试工具
首先，什么是接口呢？ 接口一般来说有两种，一种是程序内部的接口，一种是系统对外的接口。 系统对外的接口：比如你要从别的网站或服务器上获取资源或信息，别人肯定不会把数据库共享给你，他只能给你…...
JUC包工具类介绍二
JUC包工具类介绍二 异步任务 Callable Callable接口定义一个异步任务，当Callable接口提交到ExecutorService进行异步执行时，返回结果通过Java Future获取。Callable接口同样可以获取任务执行时的异常。 public class MyCallable implements Callable&…...
第8章_聚合函数
文章目录 1 聚合函数介绍1.1 AVG和SUM函数1.2 MIN和Max函数1.3 COUNT函数演示代码 2 GROUP BY2.1 基本使用2.2 使用多个列分组2.3 演示代码 3 HAVING3.1 基本使用3.2 WHERE和HAVING的对比3.3 演示代码 4 SELECT的执行过程4.1 查询的结构4.2 SELECT执行顺序4.3 SQL的执行原理演示…...
Mysql8与mariadb的安装与常用设置
一、v10服务器mariadb的安装与常用设置 V10服务器默认安装了mariadb数据库。也可使用命令sudo yum install mariadb手动安装或升级默认安装的版本。 1.1 修改数据库密码 systemctl restart mariadb,重启mariadb服务；mysql -u root -p,要求输入密码直接回车&#…...
深入剖析Golang中单例模式
前言 虽说Golang并不是C、Java这种传统的面向对象语言，而是偏向于面向接口编程的语言。但是Golang依旧有接口、结构体、组合等概念去模拟所谓面向对象中非常重要的设计模式。基于面向对象的模型去编写代码往往能编写成高内聚、低耦合、扩展性极强、难出bug的高质量…...
Java之SpringCloud Alibaba【八】【Spring Cloud微服务Gateway整合sentinel限流】
一、Gateway整合sentinel限流 网关作为内部系统外的一层屏障,对内起到-定的保护作用，限流便是其中之- - .网关层的限流可以简单地针对不同路由进行限流,也可针对业务的接口进行限流,或者根据接口的特征分组限流。 1、添加依赖 <dependency><groupId>c…...
深入解析 Redis 分布式锁原理
一、实现原理 1.1 基本原理 JDK 原生的锁可以让不同线程之间以互斥的方式来访问共享资源，但如果想要在不同进程之间以互斥的方式来访问共享资源，JDK 原生的锁就无能为力了。此时可以使用 Redis 来实现分布式锁。 Redis 实现分布式锁的核心命令如下&am…...
[unity]多脚本情况下update函数的执行顺序
序 有的时候，执行某些脚本时会有先后顺序的要求。unity是按什么顺序来执行脚本的？如何设置？ 默认的执行顺序 官方文档里面有个很长的图： Unity - Manual: Order of execution for event functions (unity3d.com) 根据文档&…...
Maven中＜scope＞中等级的区别
标签指定了依赖项的级别吗，默认是compile （编译）。意味着依赖项将会在编译时和运行时都被包含在项目中 <scope> 标签指定了依赖项的级别为 import 。除了 import 级别，Maven还支持以下几种级别： compile &#x…...
小明和完美序列（HashMap、Map、Entry）
小明和完美序列 知识点： //导包：HashMap、Map、Entry import java.util.HashMap; import java.util.Map; import java.util.Map.Entry;public class Main {public static void main(String [] args) { //创建Map（HashMap）对象 M…...