Django+JS 实现点击头像即可更改头像的方法示例


Posted in Python onDecember 26, 2018

首先,在models.py中创建UserModels类

from django.db import models
from django.contrib.auth.models import AbstractUser


class UserModels(AbstractUser):
  nickname = models.CharField(max_length=50, null=True, verbose_name='用户昵称')
  mobile = models.CharField(max_length=11, null=True, verbose_name='电话')
  address = models.CharField(max_length=100, null=True, verbose_name='住址')
  sex = models.CharField(max_length=10, null=True, verbose_name='性别')
  head_img = models.ImageField(upload_to='%Y/%m', verbose_name='头像', null=True)

  class Meta:
    db_table = 'user'
    verbose_name = '用户'
    verbose_name_plural = verbose_name

想要显示在admin后台,则必须在admin.py文件中注册

from django.contrib import admin
from .models import UserModels

admin.site.register(UserModels)

然后,在settings.py中,

AUTH_USER_MODEL = 'customuser.UserModels'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

之后,python manage.py makemigrations

python manage.py migrate进行同步到数据库

然后,也就开始实现头像的更换

在urls.py中绑定路由:

path('info/', TemplateView.as_view(template_name='user/userinfo.html'), name='user_info'),
 path('headimg/', headimg, name='user_img'),

在userinfo.html中:

html部分:

form action="#" method="post">
    {% csrf_token %}
  </form>
  <div class="header">
    <div class="container">
      <h2>个人信息</h2>
    </div>
  </div>
  <div class="container">
    <dl>
      <dt>头像</dt>
      <dd id="file">
        <img src="/static/images/{{ request.user.head_img }}" alt="" style="border-radius: 50%; width: 100px;height: 100px;" id="img-show">
        {# input type="file" 这种标签,该标签自带的就有click事件。type='text'这种类型就没有点击事件。 #}
        <input type="file" id="img-upload" style="display: none;" onchange="uploadimg()">
      </dd>

      <dt>昵称:</dt>
      <dd>{{ request.user.nickname }}</dd>
      <dt>电话:</dt>
      <dd>{{ request.user.mobile }}</dd>
      <dt>住址:</dt>
      <dd>{{ request.user.address }}</dd>
      <dt>性别:</dt>
      <dd>{{ request.user.sex }}</dd>
      <dt>个人简介:</dt>
      <dd>主人很懒,什么也没有留下。</dd>
    </dl>
    <a href="{% url 'user_update' %}" rel="external nofollow" >编辑个人资料</a>
    <hr>
  </div>

js部分:

{# 点击头像图片,触发<input type="file">这个标签的click事件。#}
  <script>
    $(document).ready(function(){
      {# ready事件,指整个html文档渲染完成以后,自动执行的操作。 #}
      {# 自动执行什么操作?给img标签绑定click事件。 onclick=""; .addEventLisenter("click", function(){}); $().click(); #}
      $('#img-show').click(function () {
        {# 只要点击Img,就会触发匿名函数的调用。 #}
        {# 点击图片。触发input的点击事件。 #}
        $('#img-upload').click();
      })
    });
    function uploadimg() {
      {#alert('你切换图片了');#}
      {# 主要工作:获取选择的图片内容,读取内容,并将这个图片保存在图像上。 #}
      {# files: 这个属性就是用来获取input所选择的内容。files[0]就是一个File对象,包含文件的名称、文件的大小、文件的类型等信息。 #}
      var img_file = $('#img-upload')[0].files[0];

      {# 从文件对象img_file中读取图片内容,首先要创建一个文件读取器。 #}
      var reader_file = new FileReader();
      {# 开始利用文件读取器从img_file中读取内容 #}
      reader_file.readAsDataURL(img_file);
      {# 等图片读取完成,reader_file有一个读取成功的自动调用的回调事件 #}
      reader_file.onload = function (ev) {
        $('#img-show').attr('src', ev.target.result);
        {# 页面完成头像修改以后,需要将用户在数据库中保存的头像路径也进行修改。需要在views.py中修改用户的head_img值。 #}
        {# ajax上传图片文件到django后台:如何使用ajax请求将图片传给django后台的View。 #}
        var formdata = new FormData();
        formdata.append('img_name', img_file.name);
        formdata.append('img_file', img_file);
        {# 构造表单对象,类似于<form>标签。 #}
        {# 如果使用ajax发送POST请求,要求携带的参数里面,必须带有csrf这个随机字符串。和<form>的验证原理是一样的。<input type="hidden" name="csrfmiddlewaretoken" value="nzssW2AKQg4OOth2xmYYCYQuPFEAxhkcNPW3wwLQX6CKm8LkWhusgsowh2IcARSN"> #}
        formdata.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
          url: '{% url 'user_img' %}',
          type: 'POST',
          data: formdata,
          {# processData:默认值是True,含义就是jQuery会对参数进行编码,让其转化为一个查询字符串。如果为FALSE,意思就是不需要jQuery对data: formdata这个数据做任何处理。 #}
          {# 查询字符串:一般出现在GET请求中,username='123'&password='456' #}
          processData: false,
          {# contentType: 该字段指的是此次请求携带的数据是什么累心数据。字段的默认值application/x-www-form-urlencoded。把它的值设置false,目的就是希望不使用默认的值对formdata进行转换。 #}
          contentType: false,
          success: function(data, status) {
            alert(data);
          }
        });
        {# 1. ajax上传文件(图片、文件、音频)需要使用POST请求; #}
        {# 2. 需要将传给后台的数据,保存在FormData()表单对象中; #}
        {# 3. POST请求需要携带cstf,ajax请求和<form>请求携带方式不一样; #}
        {# 4. ajax上传文件的POST请求,需要指定两个参数:processData: false;contentType: false;#}
      }
    }
  </script>

在views.py中完善函数:

def headimg(request):
  if request.method == 'POST':
    # 前端ajax请求,将图片对象、图片名称传递到了后台的views.py中;
    img = request.FILES.get('img_file')
    # 获取数据库head_img字段的值,并切割成列表。
    # ['2018', '10', 'h2.png']
    path = request.user.head_img.url.split('/')
    # 将列表的最后一个元素图片名称,替换成新的图片名称
    path[-1] = request.POST.get('img_name')
    # 再将列表合成一个字符串
    path = '/'.join(path)

    url = settings.MEDIA_ROOT + '/' + path

    # 将ajax传过来的图片写入到本地/static/images/....目录下。
    with open(url, 'wb') as f:
      for chunk in img.chunks():
        f.write(chunk)

    # 以上步骤实现了图片的后台保存,还需要修改当前用户数据库中的头像路径。
    request.user.head_img = path
    request.user.save()

    return HttpResponse('图片上传成功')

写完之后,我们就可以测试效果了:

首先,creatsuperuser 一个用户名:admin 密码:admin12345

之后,使用admin登录admin后台,在创建两个普通用户,分别设置一个图片作为头像

Django+JS 实现点击头像即可更改头像的方法示例

Django+JS 实现点击头像即可更改头像的方法示例

创建普通用户之后,使用其中一个test进行登录项目首页:

注意:使用admin后台创建的用户,密码是没有加密的,所以,在设置登录这一方便要注意你检测的是加密密码,还是不是加密密码。

在这里,我设置的test和test1的密码都是和admin的密码一样,那么在登录test的时候,

Django+JS 实现点击头像即可更改头像的方法示例

只需要,将admin的加密密码,粘贴到test和test1的密码中。保存。之后,使用test 密码admin12345进行登录

Django+JS 实现点击头像即可更改头像的方法示例

登录成功之后,

来到修改资料页面:

Django+JS 实现点击头像即可更改头像的方法示例

当点击头像的时候,就会让选择新头像:

Django+JS 实现点击头像即可更改头像的方法示例

选择你的新头像:即上传成功

Django+JS 实现点击头像即可更改头像的方法示例

之后,再访问资料页面,就展示的是新头像了

Django+JS 实现点击头像即可更改头像的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中 Lambda表达式全面解析
Nov 28 Python
Python构建XML树结构的方法示例
Jun 30 Python
Python如何实现MySQL实例初始化详解
Nov 06 Python
基于Python Numpy的数组array和矩阵matrix详解
Apr 04 Python
Python实现一个服务器监听多个客户端请求
Apr 12 Python
python实现类之间的方法互相调用
Apr 29 Python
Python Django框架模板渲染功能示例
Nov 08 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
Dec 19 Python
python数据分析:关键字提取方式
Feb 24 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
Feb 22 Python
python网络爬虫实现发送短信验证码的方法
Feb 25 Python
python如何利用cv2模块读取显示保存图片
Jun 04 Python
Python使用requests提交HTTP表单的方法
Dec 26 #Python
利用Pyhton中的requests包进行网页访问测试的方法
Dec 26 #Python
python http基本验证方法
Dec 26 #Python
python url 参数修改方法
Dec 26 #Python
在python中使用xlrd获取合并单元格的方法
Dec 26 #Python
python+opencv实现高斯平滑滤波
Jul 21 #Python
python+opencv实现阈值分割
Dec 26 #Python
You might like
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php字符串截取的简单方法
2013/07/04 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
微信小程序实现侧边栏分类
2019/10/21 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
python基于物品协同过滤算法实现代码
2018/05/31 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
Python如何定义一个函数
2015/09/01 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
小饰品店的创业计划书范文
2013/12/28 职场文书
四年大学自我鉴定
2014/02/17 职场文书
意向书范文
2014/03/31 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android