实时展示用户上传的头像

实时展示用户上传的头像

总体思路

"""
1.首先需要给对应的上传头像input框绑定一个文本域变化事件
(当检测到用户对该文件框上传了头像就会触发一系列操作)

2.再生成一个文件阅读器对象

3.再获取用户上传的文件头像

4.把用户上传的文件头像交给文件阅读器对象FileReader读取

5.利用文件阅读器把读取的文件头像结果展示到前端页面
(修改img的src属性,属性结果为文件阅读器的结果)

"""
# 注意:第4步的操作是异步和IO操作,异步就是不等待结果返回进行往下执行,
IO操作就是需要进行读写;所有第5步直接执行不会得到任何结果!!!

正确的操作是给第4步加上预加载(等待第4步加载完毕再执行第5步!!)

代码实现

<div class="form-group">
     <label for="myfile" style="color: white">
         头像:&nbsp&nbsp<img src="/static/img/default.png" alt="" width="80" id="myimg">
      </label>
      <input type="file" id="myfile" style="display: none" id="myfile">
</div>

<script>
    $('#myfile').change(function (){
        let fileReaderObj = new FileReader();
        let fileObj = $(this)[0].files[0];
        fileReaderObj.readAsDataURL(fileObj);
        fileReaderObj.onload = function (){
            $('#myimg').attr('src',fileReaderObj.result);
        }
    })
</script>

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:实时展示用户上传的头像 - Python技术站

(0)
上一篇 2023年4月2日 下午4:57
下一篇 2023年4月2日

相关文章

  • 基本运算符

    基本运算符 算术运算符 print(10+2) # 加减乘除运算符 print(10 / 3) print(10 // 3) # 只保留整数部分 print(10 % 3) # 取余数 print(10 ** 3) # 幂方运算 比较运算符 <、>、>=、<=、==、!= 赋值运算符 # =:变量赋值 # +=、-=、*=、**=、/…

    Python开发 2023年4月2日
    00
  • python中的三大主流wed框架简介

    1.django 特点:大而全,自带的功能特别特别多,类似于航空母舰 不足之处:有时候过于笨重 django中web框架的三个部分: socket部分:用的wsgiref模块路由与视图函数的对应关系:自己写的模板语法:自己写的 2.flask 特点:小而精,自带的功能特别少,类似于轻骑兵 但是它的第三方模块特别特别的多,如果把第三方模块加起来完全可以盖过dj…

    Python开发 2023年4月2日
    00
  • django中的中间件

    1. 什么是中间件 中间件是django的门户,在请求响应进入进出django的时候,都需要先经过中间件,用来全局改变django的输入和输出。 django中自带7个中间件,每个中间件都有其特定的功能,并且django支持自定义中间件。 MIDDLEWARE = [ ‘django.middleware.security.SecurityMiddlewar…

    2023年4月2日
    00
  • 免费课页面前端搭建和后端课程分类接口、课程群查接口设计

    免费课页面前端搭建 点击查看代码 <template> <div class=”course”> <Header></Header> <div class=”main”> <!– 筛选条件 –> <div class=”condition”> <ul class=”…

    Python开发 2023年4月2日
    00
  • 登录功能

    思路分析 登录页面,我们还是采用ajax的方式提交用户数据 唯一需要学习的是如何制作图片验证码! 具体的登录页面效果图如下: 如何制作图片验证码 推导步骤1:在img标签的src属性里放上验证码的请求路径 补充1.img的src属性: 1.图片路径 2.url 3.图片的二进制数据 补充2:字体样式 我们计算机上之所以可以输出各种各样的字体样式,其内部其实对…

    2023年4月2日
    00
  • 进程

    1 什么是进程 进程是系统进行资源分配和调度的基本单位,进程表示程序正在执行的过程,是‘活的’,而程序就是一推躺在硬盘上的代码,是‘死的’。 2 进程的调度 1.先来先服务调度算法:对长作业有利,对短作业无利2.短作业优先调度算法:对短作业有利,对长作业无利3.时间片轮转法+多级反馈队列该方法是指,将时间片切成n份,每一份表示一个时间片,这些时间片有一个优先…

    2023年4月2日
    00
  • 面向对象介绍

    1.什么是面向对象和面向过程编程思想 面向过程: 1.核心是‘过程’二字2.过程的含义是将程序流程化3.过程是流水线,用来分步骤解决问题的 程序=数据+功能 面向对象: 1.核心是‘对象’二字2.对象的含义是将程序进行整合3.对象是‘容器’,用来盛放数据和功能(变量和函数) 总结:以做西红柿鸡蛋面为例: 面向过程:我需要买西红柿–》买鸡蛋、面–》把西红柿…

    2023年4月2日
    00
  • django中的模板层简介

    1.什么是模板层 模板层可以根据视图中传递的字典数据动态生产相应的HTML页面 2.模板层的配置 1.在项目下创建一个与同名文件夹平行的templates文件夹 2.在settings.py中的TEMPLATES配置项中 BACKEND:指定模板的引擎 DIRS:模板的搜索目录(可以是一个或者多个) APP_DIRS:是否需要在应用中的templates文件…

    Python开发 2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部