当前位置：首页 > news >正文

JS实现文件点击或者拖拽上传

news 来源：原创 2025/9/12 7:08:48

B站看到了渡一大师课的切片，自己实现了一下，做下记录

效果展示

分为上传前、上传中和上传后

实现

分为两步

界面交互
网络请求

源码如下

`upload.html`

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图片上传 Demo</title><link rel="stylesheet" href="upload.css" /></head><body><h1>图片上传 Demo</h1><div class="upload select"><div class="upload-select"><input type="file" accept="image/*" / ></div><div class="upload-progress"><div class="upload-progress-bar"></div><div class="upload-progress-text">文件上传中...</div><button>取消</button></div><div class="upload-result"><button>删除</button><img src="" alt="" class="preview" /></div></div><script src="upload.js"></script></body>
</html>

`upload.js`

document.addEventListener('DOMContentLoaded', function () {const $ = document.querySelector.bind(document);const doms = {img: $('.preview'),container: $('.upload'),select: $('.upload-select'),selectFile: $('.upload-select input'),progress: $('.upload-progress'),cancelBtn: $('.upload-progress button'),delBtn: $('.upload-result button'),};// 备用方案，不利用input拖拽，将input设置为none// doms.select.ondragenter = function (e) {// 	e.preventDefault();// };// doms.select.ondragover = function (e) {// 	e.preventDefault();// };// doms.select.ondrop = function (e) {// 	e.preventDefault();// 	const file = e.dataTransfer.files[0];// 	if (!validateFile(file)) {// 		return;// 	}// 	doms.selectFile.files = e.dataTransfer.files;// 	doms.selectFile.onchange();// };// 切换三个子界面function showArea(areaName) {doms.container.className = `upload ${areaName}`;}// 设置进度function setProgress(value) {doms.progress.style.setProperty('--progress', value + '%');}// 取消上传let cancelUpload = null;function cancel() {cancelUpload && cancelUpload(); // 取消网络传输showArea('select');doms.selectFile.value = '';}// 上传文件的文件变化doms.selectFile.onchange = function () {if (this.files.length === 0) {return;}const file = this.files[0];console.log(file);if (!validateFile(file)) {return;}// 切换界面showArea('progress');// 显示预览图const reader = new FileReader();reader.onload = function (e) {doms.img.src = e.target.result;};reader.readAsDataURL(file); // 异步的，结果需要上边的监控拿到upload(file,function (val) {setProgress(val);},function (res) {showArea('result');},);};// 上传文件function upload(file, onProgress, onFinish) {const xhr = new XMLHttpRequest();xhr.onload = function () {const resp = JSON.parse(xhr.responseText);onFinish(resp);};xhr.upload.onprogress = function (e) {if (e.lengthComputable) {const percent = Math.round((e.loaded / e.total) * 100);onProgress(percent);}};xhr.open('POST', '/upload');const form = new FormData();form.append('avatar', file);xhr.send(form);}// 校验function validateFile(file) {const maxSize = 1024 * 1024 * 2;if (file.size > maxSize) {alert('文件大小不能超过2M');return false;}const allowTypes = ['image/jpeg', 'image/png', 'image/gif'];if (!allowTypes.includes(file.type)) {alert('文件类型只能是jpg、png、gif');return false;}return true;}doms.cancelBtn.onclick = doms.delBtn.onclick = cancel;
});

`upload.css`

body {font-family: Arial, sans-serif;margin: 0;padding: 0;
}
.upload {width: 400px;height: 400px;background-color: azure;
}/* 通过属性控制子组件显示 */
/* 当父元素有 select 类时，只显示上传选择区域 */
.upload.select .upload-select {display: flex;
}.upload.select .upload-progress,
.upload.select .upload-result {display: none;
}/* 当父元素有 progress 类时，只显示进度条 */
.upload.progress .upload-progress {display: flex;
}.upload.progress .upload-select,
.upload.progress .upload-result {display: none;
}/* 当父元素有 result 类时，只显示结果区域 */
.upload.result .upload-result {display: flex;
}.upload.result .upload-select,
.upload.result .upload-progress {display: none;
}.upload-select {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;position: relative;background-image: url(./fileUplaod.svg);background-position: center;background-repeat: no-repeat;
}/*  本身就支持拖拽 */
.upload-select input {display: block;width: 100%;height: 100%;opacity: 0;cursor: pointer;
}.upload-progress {--progress: 0%;height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.upload-progress-bar {width: var(--progress);height: 10px;background-color: #4caf50;transition: width 0.3s ease;
}.upload-result {height: 100%;width: 100%;display: flex;flex-direction: column;justify-content: center;
}.preview {max-width: 90%;max-height: 90%;width: auto;height: auto;/* 以下属性确保图片居中显示 */display: block;margin: 0 auto;/* 保持宽高比 */object-fit: contain;
}

JS实现文件点击或者拖拽上传

B站看到了渡一大师课的切片，自己实现了一下，做下记录效果展示分为上传前、上传中和上传后实现分为两步界面交互网络请求源码如下 upload.html <!DOCTYPE html> <html lang"zh-CN"><head><meta charset&q…...

编程日记 2025/9/12 7:08:48

【Vue #3】指令补充样式绑定

一、指令修饰符 Vue 的指令修饰符（Directive Modifiers）是 Vue 模板语法中的重要特性，它们以半角句号 . 开头，用于对指令的绑定行为进行特殊处理修饰符作用如下： 简化事件处理（如阻止默认行为、停止冒泡…...

编程日记 2025/9/6 11:57:06

Vue.js组件安全工程化演进：从防御体系构建到安全性能融合

——百万级流量场景下的安全组件架构与源码级解决方案文章目录总起：安全工程化的组件革命分论： 一、现存组件架构的七宗罪与安全改造路径　 1.1 组件生态安全赤字现状　 1.2 架构级安全缺陷深度剖析　 1.3 性能与安全的死亡螺旋二、百万级…...

编程日记 2025/9/12 7:08:03

LINUX基础 [二] - Linux常见指令

目录 💻前言 💻指令 🎮ls指令 🎮pwd指令 🎮whoami指令 🎮cd指令 🎮clear指令 🎮touch指令 🎮mkdir指令 🎮rmdir指令 🎮rm指令 &#…...

编程日记 2025/9/12 7:06:30

Linux进阶命令

目录一、touch 1. 基本语法 2. 常用选项二、which 1. 基本语法 2. 主要功能 3. 常用选项三、find 1. 基本语法 2. 常用选项和表达式四、more 1. 基本语法 2. 常用操作 3. 对比 more 和 less 五、grep 1. 基本语法 2. 常用选项六、wc 1. 基本语法 2. 常…...

编程日记 2025/9/7 15:45:20

【Spring Boot 过滤器】

文章目录前言一、什么是过滤器 Filter？二、Spring Boot 中使用 Filter 的方式1. 使用 Component 注解2. 使用 FilterRegistrationBean 显式注册三、自定义过滤器示例1. 引入必要依赖2. 创建一个自定义 Filter3. 使用 FilterRegistrationBean 显式注册四、多个 Fi…...

编程日记 2025/9/3 14:11:05

SPI通讯的软硬件NSS SSM SSI

学习自记： 1. NSS（Slave Select，从设备选择） 功能： NSS是SPI通信中用于选择从设备的信号线。主设备通过拉低NSS信号选中某个从设备，使其参与通信。通信结束后，主设备释放NSS&#…...

编程日记 2025/9/12 0:58:00

Java基础：集合List、Map、Set(超详细版)

集合体系概述 Collection常用方法补充：addAll() Collection的遍历方式迭代器增强for（空集合可以，null不可以） lambda 集合对象存储对象原理遍历方式的区别 List集合特点、特有方法遍历方式 （同上&#xff09…...

编程日记 2025/9/5 3:20:12

leaflet 区域划分_遮罩层 geojson在线生成器网址:(https://datav.aliyun.com/portal/school/atlas/area_selector) 点击前往阿里云geojson生成器效果图: 实现下面效果,只需要把addSateLayer函数的调用取消掉就好了. //添加遮罩层代码function addMask() {var latlngs;var fe…...

编程日记 2025/9/10 4:22:54

聊一聊原子操作和弱内存序

1、原子操作概念在并发编程中，原子操作（Atomic Operation）是实现线程安全的基础机制之一。从宏观上看，原子操作是“不可中断”的单元，但若深入微观层面，其本质是由底层处理器提供的一组特殊指令来保证其原…...

编程日记 2025/9/9 3:15:58

免费送源码：Java+ssm+MySQL 校园二手书销售平台设计与实现计算机毕业设计原创定制

摘要信息化社会内需要与之针对性的信息获取途径，但是途径的扩展基本上为人们所努力的方向，由于站在的角度存在偏差，人们经常能够获得不同类型信息，这也是技术最为难以攻克的课题。针对校园二手书销售平台等问题，对校…...

编程日记 2025/9/11 7:52:34

DAPP实战篇：使用ethersjs连接智能合约并输入地址查询该地址余额

本系列目录专栏：区块链入门到放弃查看目录-CSDN博客文章浏览阅读400次。为了方便查看将本专栏的所有内容列出目录，按照顺序查看即可。后续也会在此规划一下后续内容，因此如果遇到不能点击的，代表还没有更新。声明：文中所出观点大多数源于笔者多年开发经验所总结，如果你…...

编程日记 2025/8/26 15:49:51

14.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--微服务基础工具与技术--CAP

CAP 是一款专为 .NET 生态设计的开源框架，其核心目标是解决微服务中跨服务数据一致性问题。在分布式系统中，传统事务无法跨服务保证数据一致性，CAP 通过本地事务与消息记录绑定，再利用消息中间件（如 RabbitMQ、Kafka 等…...

编程日记 2025/9/11 14:56:46

智能资源管理机制-重传机制

一、发送端资源管理的核心机制 1. 滑动窗口（Sliding Window） 这是TCP协议的核心优化设计： 窗口动态滑动：发送端不需要保留所有已发送的分组，只需维护一个"发送窗口"窗口大小：由接收方通告的接…...

编程日记 2025/9/8 20:19:39

【Linux网络与网络编程】08.传输层协议 UDP

传输层协议负责将数据从发送端传输到接收端。一、再谈端口号端口号标识了一个主机上进行通信的不同的应用程序。在 TCP/IP 协议中，用 "源IP"，"源端口号"，"目的 IP"，"目的端口号"&…...

编程日记 2025/9/7 1:04:29

局域网下ESP32-S3 LED灯的UDP控制

在局域网下通过IP地址控制ESP32-S3上的LED，可以使用UDP或TCP协议。以下是一个基于UDP协议的完整示例，包括ESP32-S3的服务器代码和一个简单的Python客户端代码。 ESP32-S3 服务器代码 import socket import time import network import machineled Non…...

编程日记 2025/9/6 12:07:00

call、bind、apply

call、bind、apply它们三个都是函数的方法，都可以用于改变this的指向问题。 var person "liangxiao" let obj {name:"张三",say:function() {console.log(this.name);} }obj.say(); setTimeout(function() {obj.say(); },1000) obj.say()打…...

编程日记 2025/9/11 19:52:47

Redis 哨兵模式搭建

1 . 哨兵模式拓扑与简介本文介绍如何搭建单主双从多哨兵模式的搭建哨兵有12个作用。通过发送命令，让Redis服务器返回监控其运行状态，包括主服务器和从服务器。当哨兵监测到master宕机，会自动将slave切换成master，然后通过…...

编程日记 2025/9/12 3:40:53

客户端负载均衡与服务器端负载均衡详解

客户端负载均衡与服务器端负载均衡详解 1. 客户端负载均衡（Client-Side Load Balancing） 核心概念定义：负载均衡逻辑在客户端实现，客户端主动选择目标服务实例。典型场景：微服务内部调用（如Spring Cloud…...

编程日记 2025/8/29 0:39:05

Ningx负载均衡

Ningx负载均衡 upstream(上游)配置负载均衡1、weight（加权轮询）2、ip_hash（负载均衡）3、url hash负载均衡4、least_conn（最小连接负载均衡） upstream(上游)配置负载均衡 Nginx负载均衡参考: nginx从安装…...

编程日记 2025/9/10 21:27:09

头歌软件工程导论UML画图题(基于starUML)

一.结构化分析方法-数据流图本关卡需要画图的一共有5关，直接将此图画好每关提交一次即可，以下的所有图均以此方法提交二.面向对象分析之用例图三.面向对象分析之类图注意此处创建Class之后，双击Class出现以下选项点击相应的选项创建属性…...

编程日记 2025/9/10 19:28:48

智能车摄像头开源—9 动态权、模糊PID、速度决策、路径优化

目录一、前言二、动态权 1.概述 2.偏差值加动态权三、模糊PID 四、速度决策 1.曲率计算 2.速度拟合 3.速度控制五、路径六、国赛视频一、前言在前中期通过识别直道、弯道等元素可进行加减速操作实现速度的控制，可进一步缩减一圈的运行速度&#xff…...

编程日记 2025/9/9 3:36:43

java基础 this和super的介绍

this和super this关键字的用法super关键字的用法this与super的区别和注意事项 this关键字的用法 this是自身的一个对象，代表对象本身，可以理解为：指向对象本身的一个指针 class Person{private String name;private int age;public String …...

编程日记 2025/9/8 4:39:16

《Python星球日记》第25天：Pandas 数据分析

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 订阅专栏：《Python星球日记》目录一、引言二、数据分组与聚合1. 分组操…...

编程日记 2025/9/7 15:21:59

C++在Linux上生成动态库并调用接口测试

加减乘除demo代码项目结构 CPP/ ├── calculator.cpp ├── calculator.h ├── main.cpp 头文件 #ifndef CALCULATOR_H #define CALCULATOR_H#ifdef __cplusplus extern "C" {#endifdouble add(double a, double b);double subtract(double a, double b…...

编程日记 2025/9/11 22:04:16

Cesium.js（6）：Cesium相机系统

Camera表示观察场景的视角。通过操作摄像机，可以控制视图的位置、方向和角度。帮助文档：Camera - Cesium Documentation 1 setView setView 方法允许你指定相机的目标位置和姿态。你可以通过 Cartesian3 对象来指定目标位置，并通过 orien…...

编程日记 2025/9/9 1:30:50

机器学习中的数学(PartⅡ)——线性代数：概述

首先引入代数和线性代数的概念： 在将一些直观的、基于经验或直觉的概念转化为严格的数学或逻辑定义时，一种常用方法是构建一组对象和一组操作这些对象的规则，这就是代数。线性代数是研究向量和某些操作向量的规则。其次从更广泛的意义上定…...

编程日记 2025/9/11 8:16:12

基于双闭环PID控制器的永磁同步电机控制系统匝间故障Simulink仿真

欢迎微♥关注“电击小子程高兴的MATLAB小屋”获取巨额优惠 1.模型简介本仿真模型基于MATLAB/Simulink（版本MATLAB 2013Rb）软件。建议采用matlab2013 Rb及以上版本打开。（若需要其他版本可联系代为转换，高于该版本的matlab均可正…...

编程日记 2025/8/31 3:38:14

在51单片机上实现平滑呼吸灯：50us定时器PWM实战指南

在51单片机上实现平滑呼吸灯：50us定时器PWM实战指南引言本文将详细介绍如何在51单片机平台上，通过精确的50us定时器中断实现无闪烁的呼吸灯效果。相比常见的125us实现方案，50us定时器能提供更高的PWM频率和更细腻的亮度控制。硬件设计基本电路配置主控芯片：SC92F8…...

编程日记 2025/9/10 4:20:16

asm汇编源代码之CPU型号检测

提供1个子程序: 1. CPU型号检测 CPUTYPE 无输入参数，返回值AX指示CPU类型(报歉,当时最新CPU型号只有80486) 函数的返回值详细描述如下 CPUTYPE PROC　　FAR ;OUT: AX01, 8086; AX02, 80286; AX03, 80386; AX04, 80486 UP; ; more source code at http://www.ahj…...

编程日记 2025/9/8 12:19:52

提高课：数据结构之树状数组

1，楼兰图腾 #include<iostream> #include<cstring> #include<cstdio> #include<algorithm>using namespace std;typedef long long LL;const int N 200010;int n; int a[N]; int tr[N]; int Greater[N], lower[N];int lowbit(int x) {ret…...

编程日记 2025/9/10 22:13:44

python可变对象与不可变对象

文章目录 Python 中的可变对象与不可变对象不可变对象(Immutable Objects)可变对象(Mutable Objects)重要区别 Python 中的可变对象与不可变对象在 Python 中，对象可以分为可变对象(mutable)和不可变对象(immutable)，这是 Python 中非常重要的概念&…...

编程日记 2025/9/8 13:28:32

C++学习之金融类安全传输平台项目git

目录 1.知识点概述 2.版本控制工具作用 3.git和SVN 4.git介绍 5.git安装 6.工作区暂存区版本库概念 7.本地文件添加到暂存区和提交到版本库 8.文件的修改和还原 9.查看提交的历史版本信息 10.版本差异比较 11.删除文件 12.本地版本管理设置忽略目录 13.远程git仓…...

编程日记 2025/9/8 21:52:53

果篮问题 Python

# 给你两个长度为 n 的整数数组，fruits 和 baskets，其中 fruits[i] 表示第 i 种水果的数量，baskets[j] 表示第 j 个篮子的容量。 # 你需要对 fruits 数组从左到右按照以下规则放置水果： # 每种水果必须放入第一个容量大于等于 …...

编程日记 2025/9/11 0:16:43

Spring 是如何解决循环依赖的？

在使用 Spring 框架进行开发时，循环依赖是一个常见而棘手的问题。循环依赖指的是两个或多个 bean 之间的相互依赖，导致 Spring 容器无法正常创建这些 bean。下面将深入探讨 Spring 如何解决循环依赖问题，并提供一些最佳实践。什么是循环依赖…...

编程日记 2025/9/9 10:16:10

部署NFS版StorageClass(存储类)

部署NFS版StorageClass存储类 NFS版PV动态供给StorageClass(存储类)基于NFS实现动态供应下载NFS存储类资源清单部署NFS服务器为StorageClass(存储类)创建所需的RBAC部署nfs-client-provisioner的deployment创建StorageClass使用存储类创建PVC NFS版PV动态供给StorageClass(存储…...

编程日记 2025/9/9 17:41:23

深入理解 PyTorch 的 nn.Embedding：词向量映射及变量 weight 的更新机制

文章目录前言一、直接使用 nn.Embedding 获得变量1、典型场景2、示例代码：3、特点二、使用 iou_token nn.Embedding(1, transformer_dim) 并访问 iou_token.weight1、典型场景2、示例代码：3、特点三、第一种方法在模型更新中会更新其值吗&#xff1f…...

编程日记 2025/9/11 21:04:47

go语言内存泄漏的常见形式

go语言内存泄漏子字符串导致的内存泄漏使用自动垃圾回收的语言进行编程时，通常我们无需担心内存泄漏的问题，因为运行时会定期回收未使用的内存。但是如果你以为这样就完事大吉了，哪里就大错特措了。因为，虽然go中并未对字符串…...

编程日记 2025/9/9 6:52:34

操作系统

操作系统操作系统（OperatingSystem，OS）是指控制和管理整个计算机系统的硬件和软件资源，并合理地组织调度计算机的工作和资源的分配；以提供给用户和其他软件方便的接口和环境；它是计算机系统中最基本的系统…...

编程日记 2025/9/7 13:53:00

《JVM考古现场（十八）：造化玉碟·用字节码重写因果律的九种方法》

"鸿蒙初判！当前因果链突破十一维屏障——全体码农修士注意，《JVM考古现场（十八）》即将渡劫飞升！" 目录上卷阴阳交缠第一章：混沌初开——JVM因果律的量子纠缠第二章：诛仙剑阵改—…...

编程日记 2025/9/10 20:10:45

【2】k8s集群管理系列--包应用管理器之helm（Chart语法深入应用）

一、Chart模板：函数与管道常用函数： • quote：将值转换为字符串，即加双引号 • default：设置默认值，如果获取的值为空则为默认值 • indent和nindent：缩进字符串 • toYaml：引用一…...

编程日记 2025/9/6 17:24:07

汇编获取二进制

mov_.S mov %r8d,0 nop执行命令： gcc -c mov_.S 会输出 mov_.o 文件：objdump -D mov_.o : mov_.o： 文件格式 elf64-x86-64Disassembly of section .text:0000000000000000 <.text>:0: 44 89 04 25 00 00 00 mov %r8d,0x0…...

编程日记 2025/9/10 12:46:13

《嵌套调用与链式访问：C语言中的函数调用技巧》

🚀个人主页：BabyZZの秘密日记 📖收入专栏：C语言 🌍文章目入一、嵌套调用（一）定义（二）实现方式（三）优点（四）缺点二、链式…...

编程日记 2025/9/8 21:06:18

txt、Csv、Excel、JSON、SQL文件读取（Python）

txt、Csv、Excel、JSON、SQL文件读取（Python） txt文件读写创建一个txt文件 fopen(rtext.txt,r,encodingutf-8) sf.read() f.close() print(s)open( )是打开文件的方法 text.txt’文件名在同一个文件夹下所以可以省略路径如果不在同一个文件夹下 ‘…...

编程日记 2025/9/4 2:23:02

前端工程化之新晋打包工具

新晋打包工具新晋打包工具前端模块工具的发展历程分类初版构建工具grunt使用场景 gulp采用管道机制任务化配置与api简洁现代打包构建工具基石--webpack基于webpack改进的构建工具rollup 推荐举例说明package.jsonrollup.config.mjsmy-extract-css-rollup-plugin.mjssrc/index…...

编程日记 2025/9/8 17:26:48

Python语言介绍

Python 是一种高级、通用、解释型的编程语言，由 Guido van Rossum 于 1991 年首次发布。其设计哲学强调代码的可读性和简洁性。 Python通过简洁的语法和强大的生态系统，成为当今最受欢迎的编程语言之一。一、核心特点 Python 是一种解释型、面向对象、…...

编程日记 2025/9/9 0:45:54

关于 Spring Boot 部署到 Docker 容器的详细说明，涵盖核心概念、配置步骤及关键命令，并附上表格总结

以下是关于 Spring Boot 部署到 Docker 容器的详细说明，涵盖核心概念、配置步骤及关键命令，并附上表格总结： 1. Docker 核心概念概念描述关系镜像（Image）预定义的只读模板，包含运行环境和配置&#xff08…...

编程日记 2025/9/7 1:24:23

Tomcat 服务频繁崩溃的排查方法

# Tomcat 服务频繁崩溃排查方法当Tomcat服务频繁崩溃时，可以按照以下步骤进行系统化排查： ## 1. 检查日志文件 **关键日志位置**： - catalina.out (标准输出和错误) - catalina.log (主日志) - localhost.log (应用相关日志) - host-mana…...

编程日记 2025/9/7 9:25:07