大世界项目21——如何实现更换头像的功能

简介: 大世界项目21——如何实现更换头像的功能

1、本视频的目的,如何实现更换头像的功能

2、这里还是卡片布局,这里有头和布局

3、卡片布局,头部是提示文字

4、类型是input,为什么还要隐藏起来

5、如果是image标签,能不能出现一个添加文件的标签,能还是不能

6、你必须添加input标签,里的file,才能实现文件上传,之后我可以移花接木,点击这个按钮,使用Dom,点击这个事件

7、在用户下的新页面

8、给他配好事件方法

9、新建一个userAvatar的页面

10、这个Input是隐藏的,当点击的时候,我们触发他的做法

11、现在我想点击这个按钮的时候,获取到这个标签,触发这个点击事件

12、怎样获取标签,ref都给你了

13、通过他就能够获取点击对象了

14、触发用户的点击行为

15、给他一个二级挂载点,user-avatar

16、结果报错了,这里有个方法没有定义

17、点击标签按钮,如何触发Input的点击事件

18、点击之后,文件触发的图片,成功能够上传,onFileChange这个方法究竟是干嘛的

19、.files我就可以拿到用户选择的图片和文件

20、如果没有选择图片,那么我就什么不用干

21、他打印了用户选择的文件

22、文件选择窗口的出现方式

相关文章
|
小程序 NoSQL JavaScript
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
【易售小程序项目】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】
105 0
|
前端开发
前端学习案例-WangEdit富文本编辑器增加上传视频功能
前端学习案例-WangEdit富文本编辑器增加上传视频功能
467 0
|
5月前
|
移动开发 JavaScript 前端开发
大事件项目22_个人中心,更换头像,选择后预览
大事件项目22_个人中心,更换头像,选择后预览
|
6月前
|
人工智能 Serverless API
想要一个龙年头像,在线等挺急的
想要一个龙年头像,在线等挺急的
888 52
|
6月前
|
PHP
【ripro美化】设计子主题sheji-child素材资源下载站模板(集成后台+无授权+独立运行)
安装教程 第一步:首先对应单个上传替换包里面的文件到ripro原主题里面(单个文件覆盖不是替换整个文件包) 第二步:将下载的sheji-child压缩包上传到/wp-content/themes/直接解压,完成后到后台-外观-启用子主题 后台新建页面 1:页面-新建页面-选择VIP介绍模板,链接填vip 2:页面-新建页面-选择自助申请友链模板,链接填links
44 0
【ripro美化】设计子主题sheji-child素材资源下载站模板(集成后台+无授权+独立运行)
|
6月前
|
前端开发 JavaScript Java
若依部署上线之后验证码不显示的解决方法之一
若依部署上线之后验证码不显示的解决方法之一
|
11月前
|
存储 小程序 关系型数据库
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
111 0
|
前端开发
织梦dedecms评论助手插件(支持图片视频上传与随机头像功能)
织梦评论助手是一款评论插件,安装后可以替代原有的织梦评论,立即拥有一个属于你自己网站的友好的评论系统。支持评论图片视频上传与评论者随机头像功能。
|
前端开发 JavaScript
eggjs 怎么实现上传图片(头像)接口功能?
eggjs 怎么实现上传图片(头像)接口功能?
291 0
eggjs 怎么实现上传图片(头像)接口功能?
|
前端开发 数据库 数据安全/隐私保护
总结项目功能特点(后台系统1)| 学习笔记
快速学习 总结项目功能特点(后台系统1)
164 0
总结项目功能特点(后台系统1)| 学习笔记