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

原生js上传图片

news 2026/1/26 21:45:23

无样式上传图片

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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2026/1/25 10:29:59

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/1/26 6:09:43

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

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

编程新知 2026/1/16 17:43:27

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2026/1/15 4:58:03

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/1/26 9:46:22

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/1/24 15:09:43