首先上一个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. Raft 为什么是更易理解的分布式一致性算法(转)

    一致性问题可以算是分布式领域的一个圣殿级问题了,关于它的研究可以回溯到几十年前. 拜占庭将军问题 Leslie Lamport 在三十多年前发表的论文<拜占庭将军问题>(参考[1]). 拜 ...

  2. mysql网课部分笔记

    mysql> \s  查看当前数据库的状态 \c  取消当前所输入的命令或字符 ------------------------------------------------------- m ...

  3. window 服务

    c#写windows服务   序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用W ...

  4. mysql　回顾

    主键可以是一个或者是多个列,但所有的列(或者是列的组合)必须是唯一的,非空的 关键字distinct 可以去重,实现该效果还可以使用group by limit 默认从 0 开始,limit 5 其实 ...

  5. 设置DNS 代理

    最近烦心事好多啊,坑爹的中介... 公司之前因为断电,导致DNS基础服务故障,很多系统好半天在能使用,所以这次吸取教训,设置备份的DNS server以及使得DNS能够动态迁移,在这种时候就显得格外的 ...

  6. spring boot 中使用filter

  7. JSTL标签不起作用的解决办法

    JSP页面中的EL标签直接成字符串输出(如:${user.id}),说明el标签没有被识别,造成的原因有: 1.jdk+jstl的组合不匹配 2.web.xml版本不匹配 但我们解决以上这个问题时,先 ...

  8. ADO.Net创建数据模型和数据访问类及泛型集合

    数据模型和数据访问类:数据模型: 使用面向对象中的封装特性,将数据表中的行数据组成一个同样结构的对象,来单独使用: 数据访问类: 将某一个表的全部增删改查操作的方法写进去,方便统一管理和调用: 数据模 ...

  9. 对于“2017面向对象程序设计（Java）第就十周学习总结”存在问题的反馈

    1.“学生们普遍反映对泛型相关知识点的理解有一些难度,而且对泛型有关程序的编写有些困难.希望老师再次讲解.同学们普遍反映第四.第五个实验较难,大部分同学不能独立完成实验,希望老师能在课堂上详细解答.根 ...

  10. Java闰年的计算，Calendar的用法

    Java闰年的计算,Calendar的用法 代码如下: package com.aaa.zuoye; import java.text.ParseException; import java.util ...