python程序设置头像_Django+JS 实现点击头像即可更改头像的方法示例
首先,在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 %}
个人信息
- 头像
-
{# input type="file" 这种标签,该标签自带的就有click事件。type='text'这种类型就没有点击事件。 #}
- 昵称:
- {{ request.user.nickname }}
- 电话:
- {{ request.user.mobile }}
- 住址:
- {{ request.user.address }}
- 性别:
- {{ request.user.sex }}
- 个人简介:
- 主人很懒,什么也没有留下。
编辑个人资料
js部分:
{# 点击头像图片,触发这个标签的click事件。#}
$(document).ready(function(){
{# ready事件,指整个html文档渲染完成以后,自动执行的操作。 #}
{# 自动执行什么操作?给img标签绑定click事件。 οnclick=""; .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);
{# 构造表单对象,类似于
标签。 #}
{# 如果使用ajax发送POST请求,要求携带的参数里面,必须带有csrf这个随机字符串。和
的验证原理是一样的。 #}
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请求和
请求携带方式不一样; #}
{# 4. ajax上传文件的POST请求,需要指定两个参数:processData: false;contentType: false;#}
}
}
在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后台,在创建两个普通用户,分别设置一个图片作为头像
创建普通用户之后,使用其中一个test进行登录项目首页:
注意:使用admin后台创建的用户,密码是没有加密的,所以,在设置登录这一方便要注意你检测的是加密密码,还是不是加密密码。
在这里,我设置的test和test1的密码都是和admin的密码一样,那么在登录test的时候,
只需要,将admin的加密密码,粘贴到test和test1的密码中。保存。之后,使用test 密码admin12345进行登录
登录成功之后,
来到修改资料页面:
当点击头像的时候,就会让选择新头像:
选择你的新头像:即上传成功
之后,再访问资料页面,就展示的是新头像了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
python程序设置头像_Django+JS 实现点击头像即可更改头像的方法示例相关推荐
- python程序设置_Windows系统中设置Python程序定时运行方法
Windows系统中设置Python程序定时运行方法 一.环境 win7 + Python3.6 二.步骤 1,在Windows开始菜单中搜索"计划任务",并且点击打开" ...
- win10 休眠设置无效_windows10系统电脑点击睡眠没反应的解决方法
一些用户反馈自己在使用win10系统笔记本电脑过程中,突然碰到了无法睡眠的情况,不管是盖上屏幕还是在系统中选择睡眠,电脑都无法进行睡眠,根本没有任何反应,该怎么办呢?接下来,系统城小编就为大家带来该问 ...
- python除法保留两位小数_Python对小数进行除法运算的正确方法示例
Python对小数进行除法运算的正确方法示例 求一个算式 代码如下: a=1 b=2 c=3 print c*(a/b) 运行结果总是0,反复检查拆开以后,发现在Python里,整数初整数,只能得出整 ...
- js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
- js的时间 java怎么处理,JS实现处理时间,年月日,星期的公共方法示例
本文实例讲述了JS实现处理时间,年月日,星期的公共方法.分享给大家供大家参考,具体如下: 在项目中用到的,用js 来得到年月日,星期,当前多少个周的函数,备忘在这里,以后参考. Date.protot ...
- python合并两个有序列表_Python实现合并两个有序链表的方法示例
本文实例讲述了Python实现合并两个有序链表的方法.分享给大家供大家参考,具体如下: 思路:先选出第一个节点,然后遍历两个链表,把小的作为当前节点的下一个节点,一直到其中一个链表遍历完,这时候把另一 ...
- python 图片相似度算法比较_python 比较2张图片的相似度的方法示例
本文介绍了python 比较2张图片的相似度的方法示例,分享给大家,具体如下: #!/usr/bin/python # -*- coding: UTF-8 -*- import cv2 import ...
- python打印不同颜色的字_Python 根据日志级别打印不同颜色的日志的方法示例
本文介绍了Python 根据日志级别打印不同颜色的日志的方法示例,分享给大家,具体如下: # -*-coding:UTF-8-*- import logging import os import ti ...
- java nodejs aes_Java与Node.js利用AES加密解密出相同结果的方法示例
前言 工作中遇到nodejs端通过aes加密,安卓客户端Java解密,同样nodejs也需要解密安卓客户端加密过来的内容,发现两个加密结果不一样,查询资料发现java端需要对密钥再MD5加密一遍,以下 ...
最新文章
- 存储过程授权给子用户
- 数学建模python和java_参加数学建模用 MATLAB,还是 Python?
- 第3 章体系结构(Architecture)
- 【TensorFlow】TFRecord数据集的制作:读取、显示及代码详解
- puppeteer stop redirect 的正确姿势及 net::ERR_FAILED 的解决
- 贵州大学计算机科学研究所,贵州大学计算机科学与技术学院
- Spring Boot多数据源配置与使用
- Mysql 对语句的长度有限制,默认是 4M
- html三栏布局有哪几种,CSS三栏布局的5种方法详解
- WPE教程 传奇神秘商店外挂制作
- [Mysql] STR_TO_DATE函数
- java oop 题目_JavaOOP试题JavaOOP试题.doc
- PHP编写poc,代码实战/萌新如何编写sql注入的poc
- 微信小店二次开发_微信小店二次开发功能套餐列表
- 转载:云计算必将极大影响未来--云泉
- Python笔记-pyautogui 图片定位
- vim中复制整个别的文件内容
- zepto和jquery
- 关于物联网通信协议(接入协议)
- Nginx 代理配置
热门文章
- 057_Windows10平板模式
- CSharpGL(0)一个易学易用的C#版OpenGL
- 解决Linux根目录空间不足
- 【EasyRL学习笔记】第三章 表格型方法(Q-Table、Sarsa、Q-Learning)
- Java---根据姓查找学生的信息
- 域名批量注册好不好?回报率高吗?
- 煤炭行业“数字矿山”相关公司系统集成资质一览
- [设计模式C++]外观模式
- centos下配置django、uwsgi和nginx(亲测成功)
- Node的安装与环境变量的配置