Django实现注册页面_头像上传
Django实现注册页面_头像上传
Django实现注册页面_头像上传
1.urls.py 配置路由
from django.conf.urls import url
from django.contrib import admin
from blog import views
from django.views.static import serve
from meblog import settings
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/', views.login),
#
url(r'^get_valid_img/', views.get_valid_img),
url(r'^index/', views.index),
url(r'^reg/', views.reg),
# media 配置 图片存储路径可直接访问
url(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),
]
2.在app 包路径 创建一个forms.py 用于定义类：
from django import forms
from django.forms import widgets
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class RegForm(forms.Form):
username = forms.CharField(min_length=5,
# 定义 class 类型 form-control 为 bootcss 样式
widget=widgets.TextInput(attrs={"class": "form-control"})
)
password = forms.CharField(min_length=5,
widget=widgets.PasswordInput(attrs={"class": "form-control"}))
repeat_password = forms.CharField(min_length=5,
widget=widgets.PasswordInput(attrs={"class": "form-control"})
)
email = forms.EmailField(min_length=5,
widget=widgets.TextInput(attrs={"class": "form-control"})
)
# 清洗全局 钩子用于清洗 两次用户输入的密码是否一致
def clean(self):
if self.cleaned_data.get("password") == self.cleaned_data.get("repeat_password"):
return self.cleaned_data
else:
raise ValidationError("两次密码不一致")
3.视图views.py页面配置
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
from PIL import Image
from django.contrib import auth
from .models import *
import json
from django.contrib.auth.decorators import login_required
from blog.forms import RegForm
def reg(request):
if request.is_ajax():
regForm = RegForm(request.POST)
regResponse = {"user": None, "error_msg": None}
if regForm.is_valid(): # is_valid() 是已经验证过的数据
username = regForm.cleaned_data.get("username")
password = regForm.cleaned_data.get("password")
email = regForm.cleaned_data.get("email")
avatar = request.FILES.get("imgFile") # 获取模板传入的 图片
user = UserInfo.objects.create_user(username=username, password=password, email=email, avatar=avatar)
regResponse["user"] = user.username
else:
regResponse["error_msg"] = regForm.errors
return HttpResponse(json.dumps(regResponse))
regForm = RegForm()
return render(request, "reg.html", {"regForm": regForm})
4.模板页面reg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="/static/css/login.css">
<link rel="stylesheet" href="/static/dist/css/bootstrap.css">
<script src="/static/dist/js/jquery-3.2.1.js"></script>
<script src="/static/dist/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form class="col-md-6 col-md-offset-3" id="reg">
<div class="form-group">
<label for="user">用户名</label>
{{ regForm.username }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">密码</label>
{{ regForm.password }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">确认密码</label>
{{ regForm.repeat_password }} <span class="err_msg"></span>
</div>
<div class="form-group">
<label for="pwd">邮箱</label>
{{ regForm.email }} <span class="err_msg"></span>
</div>
<div class="form-group" id="avatar">
<label for="avatar">头像</label>
<p><img src="/static/img/default.png" alt="" id="avatar_img"></p>
<p><input type="file" id="avatar_file"></p>
</div>
<div class="row">
<div class="col-md-6">
<input type="button" value="登录" class="btn-primary btn Regbtn">
</div>
</div>
</form>
</div>
</div>
<script>
// 数据发送
$(".Regbtn").click(function () {
// 实例化一个对象 使用 new FormData()
var formdata=new FormData();
formdata.append("username",$("#id_username").val()); // username 为 key ,$("#user").val() 为值；将键值对追加到 formdata中
formdata.append("imgFile",$("#avatar_file")[0].files[0]); // 获取的 二进制文件
formdata.append("password",$("#id_password").val());
formdata.append("repeat_password",$("#id_repeat_password").val());
formdata.append("email",$("#id_email").val());
$.ajax({
url:"/reg/",
headers:{"X-CSRFToken":$.cookie('csrftoken')},
type:"post",
// 传送数据一：通过FormData() 方式
data:formdata,
processData:false, // 数据是否做预处理
contentType:false, // 编码类型
// 传送数据二： serialize 方式
// 输出序列化表单值的结果： 通过 form定义的 id=reg 属性 .serialize() 可以获取里面所有的键值对
// data:$("#reg").serialize(),
// 传送数据一： data 列表方式
// data:{ // 与此结果一致
// username:$("#id_username").val(),
// password:$("#id_password").val(),
// repeat_password:$("#id_repeat_password").val(),
// email:$("#id_email").val()
// },
success:function (data) {
var data=JSON.parse(data);
{# console.log(data);#}
if(data.user){
location.href="/login/"
}
else {
// 在每次 点击提交时，将错误信息清空
$(".err_msg").html("");
var error_dict = data.error_msg;
// 通过 each 循环错误信息，里的 key 和 值
$.each(error_dict,function (i,j) {
console.log(i,j);
// 拼接 forms 生成的 id 标签，在其后面标签添加 内容
$("#id_"+i).next().addClass("pull-right").html(j[0]).css("color","red");
// 判断如果 i 等于 __all__ 全局 清洗 钩子 返回的错误，将错误值放到 id_repeat_password 后面
if(i=="__all__"){
$("#id_repeat_password").next().addClass("pull-right").html(j[0]).css("color","red");
}
})
}
}
})
});
// 头像预览,给头像 绑定个 change 变更事件
$("#avatar_file").change(function () {
// 获取 变更的 文件
var choose_file=$("#avatar_file")[0].files[0];
// 通过 new FileReader() 方法获取一个 reader 对象
var reader = new FileReader();
// 该 reader 对象下有个 reader.readAsDataURL() 方法可以直接获取文件的 路径
reader.readAsDataURL(choose_file);
// 等路径加载完成后，将得到的结果 url 通过 onload 赋给 img 标签的 src;
reader.onload = function () {
// this.result 将获取的 url结果 赋值给 src
$("#avatar_img").attr("src",this.result)
}
})
</script>
</body>
</html>
5.定义models.py表里设置头像文件的存放位置
from django.db import models
# Create your models here.
from django.contrib.auth.models import AbstractUser
class UserInfo(AbstractUser):
"""
用户信息
"""
nid = models.AutoField(primary_key=True)
nickname = models.CharField(verbose_name='昵称', max_length=32)
telephone = models.CharField(max_length=11, blank=True, null=True, unique=True, verbose_name='手机号码')
# 用户上传的数据会根据该目录，结合UserInfo表中upload_to='avatarDir/' 参数来拼接当前目录
avatar = models.FileField(verbose_name='头像', upload_to='avatarDir/', default="avatar/default.png")
create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
blog = models.OneToOneField(to='Blog', to_field='nid', null=True)
def __str__(self):
return self.username
6.settings.py 配置 MEDIA_ROOT 路径;用于存放用户上传得文件
MEDIA_ROOT = os.path.join(BASE_DIR, "blog", "media")
MEDIA_URL = "/media/"
Django实现注册页面_头像上传的更多相关文章
- Django项目实战之用户头像上传与访问
1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> < ...
- python Django注册页面显示头像
python Django注册页面显示头像(views) def register(request): ''' 注册 :param request: :return: ''' if request.m ...
- Django 自带 user 字段扩展及头像上传
django 及 rest_framework 笔记链接如下: django 入门笔记:环境及项目搭建 django 入门笔记:数据模型 django 入门笔记:视图及模版 django 入门笔记:A ...
- day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息
目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...
- 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)
今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...
- [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能
很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...
- struts 头像上传
java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...
- Html5实现头像上传和编辑，保存为Base64的图片过程
一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...
随机推荐
- 识别oracle数据库软件版本号
由于Oracle数据库不断发展并可能需要维护,因此Oracle会定期生成新版本.并非所有客户最初都订阅新版本或需要对其现有版本进行特定维护.因此,该产品的多个版本同时存在. 可能需要多达五个数字才能完 ...
- [转] Understanding-LSTMs 理解LSTM
图文并茂,讲得极清晰. 原文:http://colah.github.io/posts/2015-08-Understanding-LSTMs/ colah's blog Blog About Con ...
- Python笔记 【无序】 【二】
序列list() ——把一个可迭代对象[可以是字符串,元组]转化为列表,可不带参数——生成空列表,或者带一个迭代器作为参数tuple() ——可迭代对象转化为元组str(obj) ——把obj对象转换 ...
- 数字图像处理的Matlab实现（1）—绪论
第1章 绪论 1.1 什么是数字图像处理 一幅图像可以定义为一个二维函数\(f(x,y)\),这里的\(x\)和\(y\)是空间坐标,而在任意坐标\((x,y)\)处的幅度\(f\)被称为这一坐标位置 ...
- Go语言中的struct tag
有时在Go的结构体定义时会看到这样的形式: type User struct { UserId int `json:"user_id" bson:"b_user_id&q ...
- Datasnap 服务端 （Server）Session 管理 --- 解决 全示例慢（Google）
Datasnap 服务端 (Server)Session 管理: http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Server_Side_Ses ...
- pt-table-sync同步报错Called not_in_left in state 0 at /usr/bin/pt-table-sync line 5231【原创】
试验环境MySQL5.7.19,自己使用pt-table-sync 3.0.2版本同步后,手动在从库执行后,在用pt-table-sync验证时报错 命令如下: pt-table-,u=用户名,p=, ...
- MFC不可不会
这些可能会很抽象,你既然学MFC,给你几个不可少的技术点 1.Dynamic Creation2.Runtime Type Imformation3.Persistence4.Message Mapp ...
- ROS入门学习
ROS学习笔记 ROS入门网站; ROS入门书籍 ROS主要包含包括功能包.节点.话题.消息类型和服务; ROS功能包/软件包(Packages) ROS软件包是一组用于实现特定功能的相关文件的集合, ...
- python之__new__()
__new__() 是在新式类中新出现的方法,它作用在构造方法建造实例之前,可以这么理解,在 Python 中存在于类里面的构造方法 __init__() 负责将类的实例化,而在 __init__() ...