【ajax实战05】文章封面发布

一:实现效果

在这里插入图片描述

二:实现步骤

1 准备标签结构和样式

html结构样式

<div class="cover"><label for="img">封面:</label><label for="img" class="place">+</label><input class="img-file" type="file" name="img" id="img" hidden=""><img class="rounded"></div>

2 获取提交的文件保存在表单对象(FormData)中(服务器要求)

3 单独上传图片并得到图片url地址

4 回显并切换img标签展示(隐藏+号上传标签)

document.querySelector('.img-file').addEventListener('change', async e => {//从FileList对象中选取属性名为0的对象const file = e.target.files[0]console.log(file);//  *  2.2 选择文件并保存在 FormData//可以使用FormData对象携带表单数据const formData = new FormData()formData.append('image', file)console.log(formData);//利用async和await等待axios成功返回的结果const result = await axios({url: '/v1_0/upload',method: 'post',data: formData})//  *  2.3 单独上传图片并得到图片 URL 网址// console.log(result);const imgUrl = result.data.urldocument.querySelector('.rounded').src = imgUrldocument.querySelector('.rounded').classList.add('show')document.querySelector('.place').classList.add('hide')
})

当点击img更换图片

//点击img可以重新切换封面
// 思路:img点击=》用JS方式触发文件选择元素(input标签),用click事件方法模拟点击input
document.querySelector('.rounded').addEventListener('click', () => {document.querySelector('.img-file').click()
})

注意:图片地址临时存储在img标签上,并未和文章关联保存

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/35578.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025秋招NLP算法面试真题目录

2025 秋招 NLP 算法面试真题专栏包含&#xff1a;预训练模型、文本表征、文本相似度、文本分类、多模态、知识蒸馏、词向量等内容&#xff0c;涵盖全面&#xff0c;实用性强。欢迎订阅&#xff0c;专栏将持续更新&#xff0c;助力您的秋招备战&#xff01; 深度学习自然语言处…

CS-隐藏防朔源-数据转发-中间件反向代理-Apache

目录 1、代理机安装Apache: 2、中间件设置转发&#xff1a; 添加代理 3、重启Apache服务 4、CS监听器配置转发机IP 实战情况下还是要准备两台外网服务器. --还是做个中转 1、代理机安装Apache: apt-get install apache2 a2enmod proxy proxy_ajp proxy_balancer proxy_co…

路由(urls)

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 Django的URL路由流程&#xff1a; l Django查找全局urlpatterns变量&#xff08;urls.py&#xff09;。 l 按照先后顺序&#xff0c;对URL逐一匹…

typescript泛型---下

typescirpt泛型—下 联合类型 联合类型字面量 联合类型由两个或者两个以上的成员类型构成&#xff0c;各个成员类型之间是通过竖线分隔 type NumericType number | bigint type T boolean | string[] | {x: number} | (() > void)联合类型的类型成员 属性签名 inter…

Python 算法交易实验73 QTV200第二步: 数据清洗并写入ClickHouse

说明 先检查一下昨天启动的worker是否正常工作&#xff0c;然后做一些简单的清洗&#xff0c;存入clickhouse。 内容 1 检查数据 from Basefuncs import * # 将一般字符串转为UCS 名称 def dt_str2ucs_blockname(some_dt_str):some_dt_str1 some_dt_str.replace(-,.).re…

【LeetCode】七、树、堆、图

文章目录 1、树结构2、二叉树3、二叉树的遍历4、堆结构&#xff08;Heap&#xff09;5、堆化6、图 1、树结构 节点、根节点、叶子节点&#xff1a; 高度、深度、层三者的示意图&#xff1a; 2、二叉树 相比其他树&#xff0c;二叉树即每个节点最多两个孩子&#xff08;两个分…

Linux高级编程——进程

1.进程的含义? 进程是一个程序执行的过程&#xff0c;会去分配内存资源&#xff0c;cpu的调度 PID, 进程标识符 当前工作路径 chdir umask 0002 进程打开的文件列表 文件IO中有提到 &#xff08;类似于标准输入 标准输出的编号&#xff0c;系统给0&#xff0c;1&#xf…

【UE5.3】笔记5-蓝图类

什么是蓝图类&#xff1a;其实就是C类&#xff0c;只不过是UE封装好的且可以直接拖出来可视化使用。 如何创建蓝图类&#xff1f;蓝图类有哪些&#xff1f; 蓝图类分为基于关卡的&#xff0c;基于Actor的&#xff0c;基于组件Component的。 基于关卡的蓝图类 一个关卡只能有…

涉案财物管理系统|DW-S405系统实现涉案财物科学化管理

随着社会的不断发展&#xff0c;犯罪形式日益复杂&#xff0c;涉案财物的种类和数量也不断增加。传统的涉案财物管理方式已经无法满足现代执法办案的需求。因此&#xff0c;建立一套科学、高效、规范的警用涉案财物管理系统成为公安机关亟待解决的问题。 涉案财物管理系统DW-S…

最近在读《谁说菜鸟不会数据分析 SPSS篇》pdf分享

谁说菜鸟不会数据分析 SPSS篇 《谁说菜鸟不会数据分析&#xff08;SPSS篇&#xff09;》继续采用职场三人行的方式来构建内容&#xff0c;细致梳理了准专业数据分析的常见问题&#xff0c;并且挑选出企业实践中最容易碰到的案例&#xff0c;以最轻松直白的方式来讲好数据分析的…

【Android面试八股文】你来说一说Looper、Handler、线程间的关系,一个线程可以有几个Looper可以对应几个Handler?

文章目录 Looper相关Handler相关总结结论:一个线程可以只能创建一个Looper,但是可以创建任意多个handler 对象。 Looper相关 Looper的创建是通过在线程中执行Looper.prepare()方法创建,那么这个方法到底做了什么呢?请看下面的代码: public static void prepare() {prepa…

智能卡与存储卡的静电保护方案

SIM卡和存储卡&#xff0c;如SD卡、MMC卡等&#xff0c;在现代电子设备中扮演着核心角色&#xff0c;存储着用户的身份信息、个人数据和多媒体文件&#xff0c;是设备正常运行的基石。然而&#xff0c;静电放电&#xff08;Electrostatic Discharge, ESD&#xff09;对这些卡片…

Spring相关面试题(二)

13.Spring IOC容器的加载过程 四个形态 概念态---<Bean信息>---> 定义态----BeanDefinition---->纯净态----DI---->成熟态 对应Bean的生命周期 实例化 --> 属性注入 ---> 实例化 概念态---->定义态 实例化一个ApplicationContext的对象 调用bean…

51单片机看门狗定时器配置

测试环境 单片机型号&#xff1a;STC8G1K08-38I-TSSOP20&#xff0c;其他型号请自行测试&#xff1b; IDE&#xff1a;KEIL C51&#xff1b; 寄存器配置及主要代码 手册中关于看门狗的寄存器描述如下&#xff1a; 启动看门狗&#xff0c;需将B5位EN_WDT置1即可&#xff0c;…

postgresql.conf配置详解

postgresql.conf配置详解 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; postgresql.conf是PostgreSQL数据库的主要配置文件之一&#xff0c;它包含了各种配置…

ScheduledThreadPoolExecutor和时间轮算法比较

最近项目中需要用到超时操作&#xff0c;对于不是特别优秀的timer和DelayQueue没有看。 Timer 是单线程模式。如果某个 TimerTask 执行时间很久&#xff0c;会影响其他任务的调度。Timer 的任务调度是基于系统绝对时间的&#xff0c;如果系统时间不正确&#xff0c;可能会出现…

调和映照理论简介

调和映照理论 调和映照理论&#xff08;Harmonic Mapping Theory&#xff09;是数学中的一个重要分支&#xff0c;研究调和映照&#xff08;Harmonic Mapping&#xff09;及其性质。调和映照是指保持某种特定性质&#xff08;通常是调和性&#xff09;的映射&#xff0c;它在几…

Golang的Work Stealing机制

Go的运行时系统使用了一种名为Work Stealing&#xff08;工作窃取&#xff09;的调度策略来分配Goroutine到可用线程&#xff08;称为M&#xff0c;即Machine&#xff09;上执行。这样可以最大化CPU使用率&#xff0c;减少任务调度的开销。在这种机制下&#xff0c;任务队列和调…

STL中的迭代器模式:将算法与数据结构分离

目录 1.概述 2.容器类 2.1.序列容器 2.2.关联容器 2.3.容器适配器 2.4.数组 3.迭代器 4.重用标准迭代器 5.总结 1.概述 在之前&#xff0c;我们讲了迭代器设计模式&#xff0c;分析了它的结构、角色以及优缺点&#xff1a; 设计模式之迭代器模式-CSDN博客 在 STL 中&a…

Open AI限制来袭?用上这个工具轻松破局!

【导语】近日&#xff0c;AI领域掀起了一场不小的波澜。Open AI宣布&#xff0c;从7月9日起&#xff0c;将对部分地区的开发者实施API调用限制。这一消息对于许多依赖Open AI技术的国内初创团队来说&#xff0c;无疑是一个沉重的打击。 对于这些团队而言&#xff0c;Open AI的A…