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

原生js上传图片

news 2025/12/12 6:17:03

无样式上传图片

创建一个 FormData 对象：这个对象可以用于存储数据。

将文件添加到 FormData 对象：通过 append() 方法，将用户选择的文件添加到 formData 对象中。

使用 fetch 发送请求：使用 fetch API 或者其他方法将 FormData 对象发送到服务器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图片上传</title></head><body><!-- 文件上传 --><input type="file" id="fileInput" onchange="uploadImage()" /><script>// 上传图片的函数function uploadImage() {// 获取文件输入框元素const fileInput = document.getElementById("fileInput");// 创建formData对象，用于存储要上传的文件数据const formData = new FormData();formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中// 请求接口fetch("http://yikatong.kuxia.top/pc/common/upload", {method: "POST",body: formData, // 请求体是formData对象，其中包含文件数据}).then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据.then((data) => {console.log("上传成功:", data);}).catch((error) => {console.error("上传失败:", error);});}</script></body>
</html>

有样式的上传图片

 就是把图片回显的地方盖着输入框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>图片上传</title></head><style>* {padding: 0;margin: 0;}.box {display: flex;}/* 添加虚线边框 */#image {width: 100px;height: 100px;border-radius: 5px;margin-left: -100px;}</style><body><div class="box"><!-- 文件上传 --><inputtype="file"id="fileInput"onchange="uploadImage()"style="height: 100px; width: 100px; opacity: 0"/><!-- 用于回显图片 --><img id="image" src="/img/add.svg" /></div><script>const fileInput = document.getElementById("fileInput"); // 获取上传文件框const image = document.getElementById("image"); // 获取回显图片框function uploadImage() {const formData = new FormData(); // 创建formData对象，用于存储要上传的文件数据formData.append("file", fileInput.files[0]); // 将选中的文件添加到formData对象中// 请求接口fetch("http://yikatong.kuxia.top/pc/common/upload", {method: "POST",body: formData, // 请求体是formData对象，其中包含文件数据}).then((response) => response.json()) // 服务器响应成功后，解析JSON格式的响应数据.then((data) => {console.log("上传成功:", data.data.url);// 回显图片image.src = "http://yikatong.kuxia.top" + data.data.url;}).catch((error) => {console.error("上传失败:", error);});}</script></body>
</html>

相关文章：

原生js上传图片

无样式上传图片 创建一个 FormData 对象&#xff1a;这个对象可以用于存储数据。 将文件添加到 FormData 对象&#xff1a;通过 append() 方法&#xff0c;将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求&#xff1a;使用 fetch API 或者其他方法将 FormDat…...

编程日记 2024/12/2 0:10:36

使用torch==2.5.1版本用的清华源遇到的坑

解决安装torch后,torch.cuda.is_available()结果为false的问题 清华源下载到的torch2.5.1版本的Lib\site-packages\torch\version.py 其中&#xff0c;清华源指的是&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorchhttps://mirrors.tuna.tsinghua.…...

编程日记 2024/12/2 0:08:34

泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用

免责声明 学习视频来自 B 站up主泷羽sec&#xff0c;如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 泷羽sec官网&#xff1a;http…...

编程日记 2024/12/2 0:06:31

对拍详细使用方法

对拍的作用 对于我们在学校OJ&#xff0c;cf&#xff0c;牛客…各种只提供少量测试数据的题目&#xff0c;常常交上代码常常超时&#xff0c;能写出正确的暴力代码而题目要求的时间复杂度更低。然而这时你写出了能通过样例且时间复杂度更低的代码&#xff0c;但交上去就是错误…...

编程日记 2024/12/2 0:03:29

Python面向对象编程与模块化设计练习

需求&#xff1a; 编写一个BankAccount类&#xff0c;模拟银行账户功能&#xff1a; 属性&#xff1a;账户名、余额 方法&#xff1a;存款、取款、查询余额 使用模块将类和测试代码分离。 模块文件&#xff1a;bank_account.py 该模块包含 BankAccount 类。 class BankAccoun…...

编程日记 2024/12/2 0:01:27

Linux系统硬件老化测试脚本：自动化负载与监控

简介&#xff1a; 这篇文章介绍了一款用于Linux系统的自动化硬件老化测试脚本。该脚本能够通过对CPU、内存、硬盘和GPU进行高强度负载测试&#xff0c;持续运行设定的时长&#xff08;如1小时&#xff09;&#xff0c;以模拟长时间高负荷运行的环境&#xff0c;从而验证硬件的稳…...

编程日记 2024/12/2 0:00:26

搭建一个基于Web的文档管理系统，用于存储、共享和协作编辑文档

搭建一个基于Web的文档管理系统&#xff0c;用于存储、共享和协作编辑文档 本项目采用以下架构&#xff1a; NFS服务器: 负责存储文档资料。Web服务器: 负责提供文档访问和编辑功能。SELinux: 负责权限控制&#xff0c;确保文档安全。Git服务器: 负责存储文档版本历史&#x…...

编程日记 2024/12/1 23:53:17

排序学习整理（1）

1.排序的概念及运用 1.1概念 排序&#xff1a;所谓排序&#xff0c;就是使⼀串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作&#xff0c;以便更容易查找、组织或分析数据。 1.2运用 购物筛选排序 院校排名 1.3常见排序算法 2.实…...

编程日记 2024/12/1 23:48:13

《深入探究 Java 中的 boolean 类型》

在 Java 编程语言的世界里&#xff0c;boolean 类型虽然看似简单&#xff0c;却在程序的逻辑控制和决策中起着至关重要的作用。本文将带你深入了解 Java 中的 boolean 类型&#xff0c;从其基本概念、用法到实际应用场景&#xff0c;以及一些常见的注意事项。 一、boolean 类型…...

编程日记 2024/12/1 23:44:09

智享 AI 自动无人直播系统：打破地域与时间枷锁中小微企业的营销破局利器

中小微企业&#xff0c;在商业浪潮中恰似逐浪扁舟&#xff0c;常面临营销成本高、推广渠道窄、专业人才缺等 “暗礁”&#xff0c;而智享 AI 自动无人直播系统恰如精准导航的灯塔&#xff0c;助其破浪前行、突出重围。 成本维度&#xff0c;传统直播人力成本让中小微企业望而却…...

编程日记 2024/12/1 23:40:04

接口测试工具：reqable

背景 在众多接口测试工具中挑选出一个比较好用的接口测试工具。使用过很多工具&#xff0c;如Postman、Apifox、ApiPost等&#xff0c;基本上是同类产品&#xff0c;一般主要使用到的功能就是API接口和cURL&#xff0c;其他的功能目前还暂未使用到。 对比 性能方面&#xff…...

编程日记 2024/12/1 23:38:02

同时多平台git配置：GitHub和Gitee生成不同的SSH Key

文章目录 GitHub和Gitee生成不同的SSH Key步骤1&#xff1a;生成SSH Key步骤2&#xff1a;配置SSH配置文件步骤3&#xff1a;查看SSH公钥步骤4&#xff1a;将SSH公钥添加到GitHub和Gitee步骤5&#xff1a;测试SSH连接步骤6&#xff1a;添加remote远程库 GitHub和Gitee生成不同的…...

编程日记 2024/12/1 23:36:00

刷题计划day24 回溯（三）【复原 IP 地址】【子集】【子集 II】

⚡刷题计划day24 回溯&#xff08;三&#xff09;继续&#xff0c;回溯一共会有五个专题&#xff0c;敬请期待关注&#xff0c;可以点个免费的赞哦~ 往期可看专栏&#xff0c;关注不迷路&#xff0c; 您的支持是我的最大动力&#x1f339;~ 目录 题目一&#xff1a;复原 IP…...

编程日记 2024/12/1 23:33:58

从“找三角形”讲“等腰三角形”

【题目】 周长为11&#xff0c;且各边长均为整数的三角形有哪些&#xff1f; 【答案】 四种&#xff0c;边长分别为&#xff1a; 2 4 5 3 3 5 1 5 5 3 4 4 【解析】 讲解等腰三角形的概念时&#xff0c;传统方法一般向学生展示一个等腰三角形的实物模型&#xff0c;这…...

编程日记 2024/12/1 23:32:57

Java中的泛型方法和泛型类

在Java编程语言中&#xff0c;泛型&#xff08;Generics&#xff09;是一个强大的特性&#xff0c;它使得类、接口和方法能够灵活地操作各种数据类型&#xff0c;同时保持类型安全。泛型主要通过类型参数&#xff08;Type Parameters&#xff09;来实现&#xff0c;这些类型参数…...

编程日记 2024/12/1 23:31:56

springboot学习-spring-boot-data-jdbc分页/排序/多表查询的例子

上次使用的是JdbcTemplate实现的&#xff0c;是比较老的方式&#xff0c;重新用spring boot data jdbc和jdbc client 实现一遍。也比较一下这几种的编码差异。数据库方面JAVA给了太多选择&#xff0c;反而不好选了。 上次就试图直接用&#xff1a; public interface UserRepo…...

编程日记 2024/12/1 23:30:55

通信与网络基础

1.网络通信基本概念 通信&#xff1a;人、物通过某种介质和行为进行信息传递与交流 网络通信&#xff1a;终端设备之间通过计算机网络进行通信 两个终端通过网线传递文件 多个终端通过路由器传递文件 终端通过Internet下载文件 2.信息传递过程 图1-1 假定A计算机访问B的web…...

编程日记 2024/12/1 23:29:54

【3.存储系统】综合大题

【考点】存储系统综合大题 【2011年408真题】某计算机存储器按字节编址&#xff0c;虚拟(逻辑)地址空间大小为16 MB&#xff0c;主存(物理)地址空间大小为1 MB&#xff0c;页面大小为4 KB&#xff1b;Cache采用直接映射方式&#xff0c;共8行&#xff1b;主存与Cache之间交换的…...

编程日记 2024/12/1 23:28:53

【Linux】【字符设备驱动】深入解析

Linux字符设备驱动程序用于控制不支持随机访问的硬件设备&#xff0c;如串行端口、打印机、调制解调器等。这类设备通常以字符流的形式与用户空间程序进行交互。本节将深入探讨字符设备驱动的设计原理、实现细节及其与内核其他组件的交互。 1. 引言 字符设备驱动程序是Linux内…...

编程日记 2024/12/1 23:23:48

【JavaEE】多线程（2）

一、线程安全 1.1 线程安全的概念 线程是随机调度执行的&#xff0c;如果多线程环境下的程序运行的结果符合我们预期则说明线程安全&#xff0c;反之&#xff0c;如果遇到其他结果甚至引起了bug则说明线程不安全 1.2 经典例子与解释 下面举一个经典的线程不安全的例子&…...

编程日记 2024/12/1 23:21:45

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/12/11 4:25:58

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/12/9 14:34:25

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/12/11 15:49:56

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/12/9 3:13:43

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/12/10 8:15:52

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/12/11 4:19:42

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/11/30 2:41:30