首先上一个html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/blog/bs/css/bootstrap.css">

    <script src="/static/js/jquery-3.2.1.min.js"></script>

    <style>

        #avatar_img {

            margin-left: 20px;

        }

        #avatar {

            display: none;

        }

        .error {

            color: red;

        }

    </style>

</head>

<body>

<h3>注册页面</h3>

<div class="container">

    <div class="row">

        <div class="col-md-6 col-lg-offset-3">

            <form id="form">

                {% csrf_token %}

                {% for field in form %}

                    <div class="form-group">

                        <label for="{{ field.auto_id }}">{{ field.label }}</label>

                        {{ field }} <span class="error pull-right"></span>

                    </div>

                {% endfor %}

                <div class="form-group">

                    <label for="avatar">

                        头像

                        <img id="avatar_img" width="60" height="60" src="/static/blog/img/default.png" alt="">

                    </label>

                    <input type="file" id="avatar" name="avatar">

                </div>

                <input type="button" class="btn btn-default reg_btn" value="submit"><span class="error"></span>

            </form>

        </div>

    </div>

</div>

<script>

    // 头像预览

    $("#avatar").change(function () {

        // 获取用户选中的文件对象

        var file_obj = $(this)[0].files[0];

        // 获取文件对象的路径

        var reader = new FileReader();

        reader.readAsDataURL(file_obj);

        // 修改img的src属性 ，src=文件对象的路径

        reader.onload = function () {

            $("#avatar_img").attr("src", reader.result)

        };

    });

    // 基于Ajax提交数据

    $(".reg_btn").click(function () {

        //console.log($("#form").serializeArray());

        var formdata = new FormData();

        var request_data = $("#form").serializeArray();

        $.each(request_data, function (index, data) {

            formdata.append(data.name, data.value)

        });

        formdata.append("avatar", $("#avatar")[0].files[0]);

        $.ajax({

            url: "",

            type: "post",

            contentType: false,

            processData: false,

            data: formdata,

            success: function (data) {

                //console.log(data);

                if (data.user) {

                    // 注册成功

                    location.href="/login/"

                }

                else { // 注册失败

                    //console.log(data.msg)

                    // 清空错误信息

                    $("span.error").html("");

                    $(".form-group").removeClass("has-error");

                    // 展此次提交的错误信息!

                    $.each(data.msg, function (field, error_list) {

                        console.log(field, error_list);

                        if (field=="__all__"){

                            $("#id_re_pwd").next().html(error_list[0]).parent().addClass("has-error");

                        }

                        $("#id_" + field).next().html(error_list[0]);

                        $("#id_" + field).parent().addClass("has-error");

                    })

                }

            }

        })

    })

</script>

</body>

</html>

大家仔细观察上方代码，在点击头像上传图片的时候，我的做法并不是用什么css定位之类的东西，而是直接用label自带的属性得到点击头像就相当于上传文件的效果。

细节看图

仅仅如此！

那如何实现头像的实时预览呢？

猜想3步骤1，头像应该是改变了 2，上传文件之后应该拿到 该图片的URL 3，将原有图片src替换为新图片的src！

onload是等待加载完成之后再去执行的内容！

下面就是forms组件了

from django import forms

from django.forms import widgets

from blog.models import UserInfo

from django.core.exceptions import NON_FIELD_ERRORS, ValidationError

class UserForm(forms.Form):

    user=forms.CharField(max_length=32,

                         error_messages={"required":"该字段不能为空"},

                         label="用户名",

                         widget=widgets.TextInput(attrs={"class":"form-control"},)

                         )

    pwd=forms.CharField(max_length=32,

                         label="密码",

                         widget=widgets.PasswordInput(attrs={"class":"form-control"},)

                        )

    re_pwd=forms.CharField(max_length=32,

                            label="确认密码",

                            widget=widgets.PasswordInput(attrs={"class":"form-control"},)

                           )

    email=forms.EmailField(max_length=32,

                            label="邮箱",

                            widget=widgets.EmailInput(attrs={"class":"form-control"},)

                            )

    def clean_user(self):

        val=self.cleaned_data.get("user")

        user=UserInfo.objects.filter(username=val).first()

        if not user:

            return val

        else:

            raise ValidationError("该用户已注册!")

    def clean(self):

        pwd=self.cleaned_data.get("pwd")

        re_pwd=self.cleaned_data.get("re_pwd")

        if pwd and re_pwd:

            if pwd==re_pwd:

                return self.cleaned_data

            else:

                raise ValidationError("两次密码不一致!")

        else:

            return self.cleaned_data

当文件上传的时候还需要在settings中配置静态文件的路径

# 与用户上传相关的配置

MEDIA_ROOT=os.path.join(BASE_DIR,"media")

MEDIA_URL="/media/"

并且还需要在URL中写出，因为django没有默认加。

 re_path(r"media/(?P<path>.*)$",serve,{"document_root":settings.MEDIA_ROOT}),

    re_path('^(?P<username>\w+)/articles/(?P<article_id>\d+)$', views.article_detail),

在这里需要注意

要先在URL中导入

from django.views.static import serve

在这里上传完整的URL配置

"""cnblog URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:

    https://docs.djangoproject.com/en/2.0/topics/http/urls/

Examples:

Function views

    1. Add an import:  from my_app import views

    2. Add a URL to urlpatterns:  path('', views.home, name='home')

Class-based views

    1. Add an import:  from other_app.views import Home

    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')

Including another URLconf

    1. Import the include() function: from django.urls import include, path

    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))

"""

from django.contrib import admin

from django.urls import path,re_path

from django.views.static import serve

from blog import views

from cnblog import  settings

from django.urls import include

urlpatterns = [

    path('admin/', admin.site.urls),

    path('login/', views.login),

    path('index/', views.index),

    path('logout/', views.logout),

    re_path('^$', views.index),

    path('get_validCode_img/', views.get_valid_code_img),

    path('register/', views.register),

    # 文本编辑器上传图片url

    path('upload/', views.upload),

    # 后台管理url

    re_path("cn_backend/$",views.cn_backend),

    re_path("cn_backend/add_article/$",views.add_article),

    # 点赞

    path("digg/",views.digg),

    # 评论

    path("comment/",views.comment),

    # 获取评论树相关数据

    path("get_comment_tree/",views.get_comment_tree),

    # media配置:

    re_path(r"media/(?P<path>.*)$",serve,{"document_root":settings.MEDIA_ROOT}),

    re_path('^(?P<username>\w+)/articles/(?P<article_id>\d+)$', views.article_detail), # article_detail(request,username="yuan","article_id":article_id)

    # 个人站点的跳转

    re_path('^(?P<username>\w+)/(?P<condition>tag|category|archive)/(?P<param>.*)/$', views.home_site), # home_site(reqeust,username="yuan",condition="tag",param="python")

     # 个人站点url

    re_path('^(?P<username>\w+)/$', views.home_site), # home_site(reqeust,username="yuan")

]

不能忘了导入，否则直接访问静态文件是找不到的

博客（二）注册页面django的更多相关文章

  1. RSP小组——团队冲刺博客二

    RSP小组--团队冲刺博客二 冲刺日期:2018年12月11日 前言 经过第一天的冲刺,我们开始了我们冲刺之路,但是不知为什么,我们的动力并不足,首先可能是我们前期对该项目的编制过程中,因为没有经验, ...

  2. vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

    0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.后端搭建 1.1项目结构 首先看一下后端的server目录 挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,mod ...

  3. django博客项目6：Django Admin 后台发布文章

    在此之前我们完成了 Django 博客首页视图的编写,我们希望首页展示发布的博客文章列表,但是它却抱怨:暂时还没有发布的文章!如它所言,我们确实还没有发布任何文章,本节我们将使用 Django 自带的 ...

  4. SSM博客登录注册

    我的博客采用的是 spring+springmvc+mybatis框架,用maven和git管理项目,之后的其他功能还有待进一步的学习. 首先新建一个maven项目,我的项目组成大概就这样, 建立好项 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十五║初探SSR服务端渲染（个人博客二）

    缘起 时间真快,现在已经是这个系列教程的下半部 Vue 第 12 篇了,昨天我也简单思考了下,可能明天再来一篇,Vue 就基本告一段落了,因为什么呢,这里给大家说个题外话,当时写博文的时候,只是想给大 ...

  6. Do-Now—团队Scrum 冲刺博客二

    各个成员今日完成的任务 侯泽洋:完成奖励页面设计,完成奖励从云端拉取到本地:完成奖励从云端拉取到本地 周亚杰:完成个人中心页面设计,登录界面美化:注册登录界面美化 王志伟:完成倒计时功能,并对页面进行 ...

  7. django博客项目2.建立 Django 博客应用

    建立博客应用 我们已经建立了 Django 博客的项目工程,并且成功地运行了它.不过到目前为止这一切都还只是 Django 为我们创建的项目初始内容,Django 不可能为我们初始化生成博客代码,这些 ...

  8. 『编程题全队』Beta 阶段冲刺博客二

    1.提供当天站立式会议照片一张 2.每个人的工作 (有work item 的ID) (1) 昨天已完成的工作 孙志威: 1.添加了SubTask类,完成基本UI 2.为SubTask类添加了展开/收缩 ...

  9. Django_博客项目 注册用户引发 ValueError: The given username must be set

    博客项目中 注册功能在ajax 提交数据时 报错 ValueError: The given username must be set 锁定到错误点为 判定为是无法获取到 username 字段 那先 ...

随机推荐

  1. FB4.6项目迁移到4.7时 embed报错问题

    问题: 从FB4.6或更早版本移植到4.7的项目Embed标签,比如 [Embed(source="assets/BtnPlay.png")]   ,会报错 解决 方案: 4.7E ...

  2. 用 CentOS 7 打造合适的科研环境

    这篇博文记录了我用 CentOS 7 搭建 地震学科研环境 的过程,供我个人在未来重装系统时参考.对于其他地震学科研人员,也许有借鉴意义. 阅读须知: 本文适用于个人电脑,不适用于服务器: 不推荐刚接 ...

  3. include 模板标签

    {%load staticfiles %}就能使用include标签了 {% include %}该标签允许在(模板中)包含其他的模板的内容,标签的参数是所要包含的模板名称,可以是一个变量,也可以是用 ...

  4. 尚硅谷redis学习4-数据类型

    redis的数据类型包括String,Hash(类似于JAVA里的map),List,Set,Zset(sorted Set) String(字符串) string是redis最基本的类型,你可以理解 ...

  5. java Overloaded的方法是否可以改变返回值的类型?

    刚才看到这样一个题,下面的解释很乱,所以还是做一下试验比较好 public class Test { public static void main(String[] args){ Bae b = n ...

  6. Constructor构造方法

    我们写一个car类,并写一个无参构造方法. public class Car { int speed; //构造方法名字和 类一致 区分大小写 不需要写返回值 和参数列表 public Car(){ ...

  7. Hibernate 再接触 关系映射 一对一单向外键联合主键关联

    例子: Husband.java package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persiste ...

  8. ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理

    ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理 计划时间:第二天下午 背景:数据量大,工程大 目的:自动化,批处理,定制业务流程,不写程序 教程:Pdf/343 数据:chap8/ex5 ...

  9. is not writable or has an invalid setter method错误的解决

    java中在配置spring时,遇到is not writable or has an invalid setter method的错误一般是命名方式的问题 需要写成private userInfoD ...

  10. Java模板引擎之freemarker简介