原生js上传图片
无样式上传图片
创建一个 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 对象:这个对象可以用于存储数据。 将文件添加到 FormData 对象:通过 append() 方法,将用户选择的文件添加到 formData 对象中。 使用 fetch 发送请求:使用 fetch API 或者其他方法将 FormDat…...

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

泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用
免责声明 学习视频来自 B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 泷羽sec官网:http…...

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

Python面向对象编程与模块化设计练习
需求: 编写一个BankAccount类,模拟银行账户功能: 属性:账户名、余额 方法:存款、取款、查询余额 使用模块将类和测试代码分离。 模块文件:bank_account.py 该模块包含 BankAccount 类。 class BankAccoun…...

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

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

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

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

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

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

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

刷题计划day24 回溯(三)【复原 IP 地址】【子集】【子集 II】
⚡刷题计划day24 回溯(三)继续,回溯一共会有五个专题,敬请期待关注,可以点个免费的赞哦~ 往期可看专栏,关注不迷路, 您的支持是我的最大动力🌹~ 目录 题目一:复原 IP…...

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

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

springboot学习-spring-boot-data-jdbc分页/排序/多表查询的例子
上次使用的是JdbcTemplate实现的,是比较老的方式,重新用spring boot data jdbc和jdbc client 实现一遍。也比较一下这几种的编码差异。数据库方面JAVA给了太多选择,反而不好选了。 上次就试图直接用: public interface UserRepo…...

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

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

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

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

mac下Gpt Chrome升级成GptBrowser书签和保存的密码恢复
cd /Users/自己的用户名/Library/Application\ Support/ 目录下有 GPT\ Chrome/ Google/ GptBrowser/ GPT\ Chrome 为原来的chrome浏览器的文件存储目录. GptBrowser 为升级后chrome浏览器存储目录 书签所在的文件 Bookmarks 登录账号Login 相关的文件 拷贝到GptBrow…...

使用Grafana K6来测测你的系统负载能力
背景 近期我们有个号称会有很高很高并发的系统要上线,为了测试一下自己开发的系统的负载能力,准备了点海克斯科技,来看看抗不抗的住。 之前笔者写过用Apache JMeter进行压力测试的文章(传送门👉:https://…...

【论文复现】基于BERT的语义分析实现
📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ WRN: 宽度残差网络 概述语义分类文本分类情感分类 实现原理 核心逻辑pre_deal.pytrain.pytest_demo.py 实现方式&演示效果训练阶段测试阶…...

CTF-RE: STL逆向 [NewStarCTF 2023 公开赛道 STL] WP
多看看STL题就会了,很简单 int __fastcall main(int argc, const char **argv, const char **envp) {__int64 v3; // rbx__int64 v4; // raxchar v5; // bl_BYTE *v6; // rax_QWORD *v7; // rax__int64 v8; // rax__int64 v9; // raxint i; // [rsp0h] [rbp-250h]int j; // [r…...

实习冲刺第三十六天
46.全排列 给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2: 输入&#…...

【Zemax光学设计实训三】---激光缩束镜的设计优化
前言与目录 技术设计要求: 设计一个激光扩束镜,使用的波长为1064nm,输入光束直径为10mm,输出光束的直径为2mm,且输入光束和输出光束平行(即平行光入射,平行光出射)。要求只使用两片…...

TCP/IP协议簇自学笔记
摘抄于大学期间记录在QQ空间的一篇自学笔记,当前清理空间,本来想直接删除掉的,但是感觉有些舍不得,因此先搬移过来。 曾经,我只知道socket函数能进行网络间数据的通信,知道tcp/ip协议也是用来进行网络数据…...

Spring Boot教程之十一:获取Request 请求 和 Put请求
如何在 Spring Boot 中获取Request Body? Java 语言是所有编程语言中最流行的语言之一。使用 Java 编程语言有几个优点,无论是出于安全目的还是构建大型分发项目。使用 Java 的优点之一是 Java 试图借助类、继承、多态等概念将语言中的每个概念与现实世…...

计算机网络(二)
ip地址:11010010:01011110:00100100:00010100 子网掩码:11111111:11111111:11111111:11000000 and :11010010:01011110:00100100:00000000 210.94.36.0的下一站为R1 因为255为11111111 192为ÿ…...

如何在Python中进行数学建模?
数学建模是数据科学中使用的强大工具,通过数学方程和算法来表示真实世界的系统和现象。Python拥有丰富的库生态系统,为开发和实现数学模型提供了一个很好的平台。本文将指导您完成Python中的数学建模过程,重点关注数据科学中的应用。 数学建…...