原生js上传图片

news/2024/12/5 7:49:49/

无样式上传图片

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


http://www.ppmy.cn/news/1551124.html

相关文章

C语言 qsort及应用

qsort及应用 qsort:快速排序函数,需要引用stdlib.h文件. void qsort( void *base, size_t num, size_t width, int (__cdecl *compare )(const void *, const void *) ); 参数: base:需要排序的数组 num:数据个数(数组长度) width:每个数据的字节数(sizeof(数据类型)) compa…

docker从入门到入土

卸载旧版本 sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ …

HtmX 表达的创建和交互

HTMX 提供了强大的功能&#xff0c;使得开发者能够创建可交互的表单元素&#xff0c;并提供更好的用户体验。以下是如何使用 HTMX 创建可交互表单元素的步骤&#xff1a; 1. 创建表单元素: 使用 HTML 创建基本的表单元素&#xff0c;例如 <input>、<select> 和 <…

go结构体匿名“继承“方法冲突时继承优先顺序

在 Go 语言中&#xff0c;匿名字段&#xff08;也称为嵌入字段&#xff09;可以用来实现继承的效果。当你在一个结构体中匿名嵌入另一个结构体时&#xff0c;嵌入结构体的方法会被提升到外部结构体中。这意味着你可以直接通过外部结构体调用嵌入结构体的方法。 如果多个嵌入结…

从技术视角看AI在Facebook全球化中的作用

在全球化日益加深的今天&#xff0c;人工智能&#xff08;AI&#xff09;作为一种变革性技术&#xff0c;正在深刻影响全球互联网巨头的发展方向。Facebook作为全球最大的社交媒体平台之一&#xff0c;正通过AI技术突破语言、文化和技术的障碍&#xff0c;推动全球化战略的实现…

3.26线性回归对率回归

就是说右边的线性组合算出一个z&#xff0c;在阶跃函数里&#xff0c;z>0就是1&#xff0c;<0就是-1 然后用对率回归的话就是大于0时是一个大于0.5的数&#xff0c;是计算得到的 最后输出的都是一个是不是的概率 只是传统的话&#xff0c;Z直接就是结果&#xff0c;而…

AI开发:生成式对抗网络入门 模型训练和图像生成 -Python 机器学习

阶段1&#xff1a;GAN是个啥&#xff1f; 生成式对抗网络&#xff08;Generative Adversarial Networks, GAN&#xff09;&#xff0c;名字听着就有点“对抗”的意思&#xff0c;没错&#xff01;它其实是两个神经网络互相斗智斗勇的游戏&#xff1a; 生成器&#xff08;Gene…

气膜建筑:打造全天候安全作业空间,提升工程建设效率—轻空间

在现代建筑工程中&#xff0c;施工环境的管理和作业效率是决定项目进度和质量的关键因素。然而&#xff0c;施工过程中常常会受到天气变化的影响&#xff0c;诸如大风、雨雪、沙尘等恶劣天气常常延误工期&#xff0c;增加施工难度。为了解决这一问题&#xff0c;气膜建筑以其独…