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实现注册页面_头像上传的更多相关文章

  1. Django项目实战之用户头像上传与访问

      1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> < ...

  2. python Django注册页面显示头像

    python Django注册页面显示头像(views) def register(request): ''' 注册 :param request: :return: ''' if request.m ...

  3. Django 自带 user 字段扩展及头像上传

    django 及 rest_framework 笔记链接如下: django 入门笔记:环境及项目搭建 django 入门笔记:数据模型 django 入门笔记:视图及模版 django 入门笔记:A ...

  4. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  5. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  6. 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能

    作者:Dreawer链接:https://zhuanlan.zhihu.com/p/24465742来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙猫(转 ...

  7. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  8. struts 头像上传

    java代码: 1 package cn.itcast.nsfw.user.action; import java.io.File; import java.io.IOException; impor ...

  9. Html5实现头像上传和编辑，保存为Base64的图片过程

    一.Html5实现头像上传和编辑 插件地址: html5手机端裁剪图片上传头像代码 本地项目引入注意事项: 1.将html的js搬到外面的js文件中,便于管理 2.图片样式在html都是在页面写死,需 ...

随机推荐

  1. HTML5 头部【快速编写】

    <!doctype html> <html><head> <meta charset="utf-8">#设置网页文件展示时使用的字符 ...

  2. C++ 模式设计

    只写了MinGw/Linux API部分.所有相关的代码都是参考C++ API C++ 11智能指针参考http://blog.csdn.net/zy19940906/article/details/ ...

  3. Faster_RCNN 2.模型准备(上)

    总结自论文:Faster_RCNN,与Pytorch代码: 本文主要介绍代码第二部分:model/utils , 首先分析一些主要理论操作,然后在代码分析里详细介绍其具体实现. 一. 主要操作 1. ...

  4. Linux内核的整体架构简介

    1. 前言 本文是“Linux内核分析”系列文章的第一篇,会以内核的核心功能为出发点,描述Linux内核的整体架构,以及架构之下主要的软件子系统.之后,会介绍Linux内核源文件的目录结构,并和各个软 ...

  5. Ubuntu 18.04使用sudo pip3报错

    在使用sudo pip3 install python库的时候出现如下警告: The directory '/home/lzhu/.cache/pip/http' or its parent dire ...

  6. Equivalent Sets HDU - 3836 2011多校I tarjan强连通分量

    题意: 给一些集合 要求证明所有集合是相同的 证明方法是,如果$A∈B$,$B∈A$那么$A=B$成立 每一次证明可以得出一个$X∈Y$ 现在已经证明一些$A∈B$成立 求,最少再证明多少次,就可以完 ...

  7. 转载：Eureka 开发时快速剔除失效服务

    原文地址:https://www.cnblogs.com/flying607/p/8494568.html 服务端配置: # 关闭保护机制 eureka.server.enable-self-pres ...

  8. CF 573B

    Bear and Blocks time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  9. Tornado学习笔记(二) 路由/post/get传参

    本章我们学习 Tornado 的路由传参等问题 路由 路由的匹配 Tornado的路由匹配采用的是正则匹配 一般情况下不需要多复杂的正则,正则的基本规则如下(站长之家) 举个例子 (r'/sum/(\ ...

  10. 洛谷P5072 [Ynoi2015]盼君勿忘 [莫队]

    传送门 辣鸡卡常题目浪费我一下午-- 思路 显然是一道莫队. 假设区间长度为\(len\),\(x\)的出现次数为\(k\),那么\(x\)的贡献就是\(x(2^{len-k}(2^k-1))\),即 ...