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

时间:2022-09-13 20:18:33

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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文件中注册

?
1
2
3
4
from django.contrib import admin
from .models import usermodels
 
admin.site.register(usermodels)

然后,在settings.py中,

?
1
2
auth_user_model = 'customuser.usermodels'
media_root = os.path.join(base_dir, 'static/images')

之后,python manage.py makemigrations

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

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

在urls.py中绑定路由:

?
1
2
path('info/', templateview.as_view(template_name='user/userinfo.html'), name='user_info'),
path('headimg/', headimg, name='user_img'),

在userinfo.html中:

html部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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部分:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
{# 点击头像图片,触发<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中完善函数:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 实现点击头像即可更改头像的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/zhangmengran/article/details/83830789