FileReader实现头像上传

最新推荐文章于 2021-11-26 15:55:00 发布
最新推荐文章于 2021-11-26 15:55:00 发布
阅读量350 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011181190/article/details/46392167
版权

我们在某网站注册一个账号的时候,会上传头像并且会在当前页面显示,这个功能要怎么实现. 

主页面的代码


效果


创建文件对象


由于有些游览器不支持 比如ie9以下


当我们点击的时候触发



成功效果




China小周
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用FileReader的方式上传头像
qq_54684701的博客
05-10 526
#用FileReader的方式上传头像 作为一个可以登录的网站，上传头像的功能是必要的,今天自己使用了FileReader（异步读取文件）的方式进行实现，来记录一下实现的过程与一下问题。 首先是HTML部分的代码 ` <div class="profilePicture"> <input type="file"class="file" id="fileImg"></input> <label for="fileImg"...
FileReader的实际应用——用户头像上传
weixin_42937036的博客
02-21 135
在最初学习FileReader的时候，了解到此API可以用来读取上传的图片信息进行图片预览，也可读取txt文件，但不清楚在实际项目中有什么应用，知道我需要修改用户头像时。。。 基本的用法可参考：FileReader()读取文件 接下来说说在上传用户头像时如何使用。 首先是页面展示 <el-avatar :size="80" :src="userInfo.avatorUrl" class="avator"></el-avatar> <div class="imgbtn"
JavaScript使用FileReader实现图片上传预览效果
10-19
主要为大家详细介绍了JavaScript使用FileReader实现图片上传预览效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5图片验证及上传实例：学习FileReader/Image
J.Jian博客
05-09 1135
用FileReader对象 上传图片
fan2016434589的博客
11-26 1126
应用场景 ——上传图片 原生的 input ，设置大小并把透明度设为0，其他样式自己设计就好 html，根据设计图自己设计即可 <div > <span> <!-- 加号 ➕ --> <img src="@static/images/icon/add_img.png" /> <...
HTML移动端头像上传插件
01-18
综上所述，HTML移动端头像上传插件结合了HTML、CSS和JavaScript技术，实现了图片选择、压缩、剪裁和上传的一体化流程，旨在为移动用户带来流畅的头像更换体验。在实际应用中，开发者可以根据项目需求进一步定制和...
头像上传功能
01-11
总的来说，实现头像上传功能涉及到前端的文件选择和预览、后端的数据接收与验证、以及可能的图片处理和数据库操作。这个过程虽然看似简单，但涉及到的技术点较多，需要对前端、后端和存储都有一定的理解。通过不断...
jQuery头像上传源代码
10-22
本资源"jQuery头像上传源代码"就是一个针对头像上传功能的实现，它允许用户在上传头像时进行剪切和伸缩操作，以确保获取到最适合的展示效果。 首先，我们需要理解jQuery的核心概念。jQuery简化了DOM操作、事件处理...
H5 页面上传头像效果
04-11
在H5页面中实现头像上传效果是一项常见的需求，它涉及到前端交互、图像处理和文件上传等技术。这里我们将详细探讨如何创建一个简单的H5头像上传功能。 首先，我们需要理解HTML5（H5）的核心特性，特别是与文件操作...
HTML5 canvas实现移动端上传头像拖拽裁剪效果
09-28
在本文中，我们将探讨如何使用HTML5的canvas元素实现移动端的头像上传并进行拖拽裁剪的功能。这个功能允许用户选择一张图片，然后在预览区域通过拖动和调整来裁剪出所需的头像部分。 首先，HTML部分创建了一个基本...
Java基础入门：掌握基本语法与概念2024最新0基础！！！易懂！！！.md
07-14
Java编程语言的基础语法要点。首先介绍了数据类型与变量的概念，包括整型、浮点型、字符型和布尔型，每种类型的定义和示例代码都有详细解释。其次，讨论了运算符与表达式的使用，包括算术运算符、赋值运算符、关系运算符和逻辑运算符，每种运算符的功能和示例展示。接着，文章深入探讨了控制流程，包括条件语句（if-else、switch-case）和循环语句（for循环、while循环、do-while循环），每种语句的用法和示例演示。随后，文章详细讲解了方法的定义与调用，展示了如何定义带有参数和返回值的方法，并给出了实际使用的示例。最后，文章介绍了Java中的数组与集合，包括如何定义和初始化数组，以及如何使用列表（List）作为集合类型存储数据。字符串处理也得到了关注，包括字符串的拼接、长度、比较、查找和替换等操作。整篇文章通过清晰的教程、详细的示例代码和逐步解释，帮助读者建立起对Java基础语法的全面理解和实际运用能力。
.archivetemp实物图.jpg
07-14
.archivetemp实物图.jpg
牛津通识读本 数学.mobi
07-14
牛津通识读本 数学.mobi
12345656734432343
07-13
12345656734432343
Go：Go数据库交互技术教程
07-14
Go：Go数据库交互技术教程
VP6视频编码格式测试码流，分辨率688X352
最新发布
07-14
VP6是由On2 Technologies所推出的视频编解码器（video codec），性能更胜之前的VP3与VP5，被广泛应用于各大视频网站的Adobe Flash视频之中。
千峰python数据类型
07-14
适配于千峰python的教程资料。内容包含了对python数据类型的介绍。
大学生创业计划书(38)三份资料.doc
07-14
大学生创业计划书(38)三份资料.doc
vue头像上传和修改
09-07
Vue头像上传和修改的实现可以分为以下几个步骤： 1. 引入第三方插件或组件：可以选择一些优秀的第三方头像上传组件，如vue-cropperjs、vue-avatar等。可以通过npm安装这些插件，并在项目中引入相应的组件。 2. 创建头像上传组件：在Vue项目中创建一个头像上传组件，该组件包含一个头像上传的文件选择框和上传按钮。同时，为了实现头像的预览功能，还需要在组件中添加一个img标签，用于显示用户选择的头像文件。 3. 头像上传事件处理：在组件的script标签中，引入头像上传组件所需要的相关方法，如上传文件的函数。可以使用axios或vue-resource等库来发送请求并上传文件到后台服务器。 4. 头像修改功能：可以在个人设置或用户信息页面中，引入头像上传组件，并预先渲染用户当前的头像。提供一个修改按钮或链接，当用户点击修改头像时，显示头像上传组件，并允许用户选择新的头像文件。当用户上传完头像并确认后，将新的头像文件保存到服务器，并更新用户的头像信息。 5. 头像预览功能：在用户选择头像文件后，可以通过FileReader对象的readAsDataURL方法将文件转换为base64编码的URL，并将该URL赋值给img标签的src属性，实现头像的预览。在上传成功后，再次更新img标签的src属性，实现头像的切换。 总结：通过引入第三方插件或组件，创建头像上传组件，实现上传事件处理和头像修改功能，同时提供头像预览功能，就能够实现Vue头像上传和修改的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值