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

原生js上传图片

news 2026/2/9 2:22:34

无样式上传图片

创建一个 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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2026/1/30 17:10:19

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2026/2/7 0:37:40

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2026/1/31 12:30:32

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2026/2/4 17:34:02