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 错误和异常小结
Oct 09 Python
Python实现一个服务器监听多个客户端请求
Apr 12 Python
python opencv 二值化 计算白色像素点的实例
Jul 03 Python
程序员的七夕用30行代码让Python化身表白神器
Aug 07 Python
Python 分发包中添加额外文件的方法
Aug 16 Python
三个python爬虫项目实例代码
Dec 28 Python
使用TFRecord存取多个数据案例
Feb 17 Python
Python查找不限层级Json数据中某个key或者value的路径方式
Feb 27 Python
详解Django配置JWT认证方式
May 09 Python
如何表示python中的相对路径
Jul 08 Python
python实现计算器简易版
Dec 17 Python
Python实现抖音热搜定时爬取功能
Mar 16 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函数代码
2010/04/22 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
php使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
接收键盘指令的脚本
2006/06/26 Javascript
Stop SQL Server
2007/06/21 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
简单谈谈json跨域
2016/03/13 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
详解vue实现坐标拾取器功能示例
2020/11/18 Vue.js
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
Python中作用域的深入讲解
2018/12/10 Python
python文件操作的简单方法总结
2019/11/07 Python
Python实现Keras搭建神经网络训练分类模型教程
2020/06/12 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
创先争优活动心得体会
2014/09/04 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记