Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册
头像预览
$("#avatar_file").change(function(){
// 获取上传的文件对象
var file=$(this)[0].files[0];
// 读取文件的URL
// 创建阅读器
var reader=new FileReader();
// 读取file的URL
reader.readAsDataURL(file);
// 监听读取,onload在读完之后触发事件(是给DOM对象绑定事件)
reader.onload=function() {
// this.result 是刚刚读取的结果
$("#avatar_img").attr("src",this.result)
}
});
头像预览
头像重叠于文件上传
css:
/*头像与文件上传叠在一起,参照物是.avatar_box,已定位的父亲*/
#avatar_img{
width: 60px;
height: 60px;
left:;
top:;
}
#avatar_file{
width: 60px;
height: 60px;
position: absolute;
left:;
top:;
opacity:;
}
.avatar_box{
position: relative;
}
头像与文件上传叠在一起
ajax注册+Form验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.min.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="/static/css/register.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form class="form-horizontal">
{% csrf_token %}
<div class="form-group">
<label for="id_user" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
{{ regForm.user }} <span class="pull-right"></span>
</div>
</div>
<div class="form-group">
<label for="id_pwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
{{ regForm.pwd }}<span class="pull-right"></span>
</div>
</div>
<div class="form-group">
<label for="id_repeat_pwd" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
{{ regForm.repeat_pwd }}<span class="pull-right"></span>
</div>
</div>
<div class="form-group">
<label for="id_email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
{{ regForm.email }}<span class="pull-right"></span>
</div>
</div>
<div class="form-group">
<label for="avatar_file" class="col-sm-2 control-label">头像</label>
<div class="col-sm-10">
<div class="avatar_box ">
<img src="/static/img/default.png" alt="" id="avatar_img">
<input type="file" class="form-control" id="avatar_file">
</div>
</div>
</div>
<div class="form-group">
<label for="id_valid_code" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-5">
{{ regForm.valid_code }}<span class="pull-right"></span>
</div>
<div class="col-sm-5">
<img style="margin-left: -17px" src="/get_valid_img/" alt="" width="230" height="33"
id="valid_img">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" value="注册" class=" btn-primary form-control regBtn ">
</div>
</div>
<div class="col-sm-offset-2 col-sm-10">
<div class="form-group" style="margin-left:-10px">已有账号？<a href="/login/">立即登录</a></div>
</div>
</form>
</div>
</div>
</div>
<script>
// 刷新验证码
$("#valid_img").click(function () {
$(this)[0].src += "?"
});
// 头像预览
$("#avatar_file").change(function () {
// 获取上传文件对象
var file = $(this)[0].files[0];
// 读取文件URL
var reader = new FileReader();
reader.readAsDataURL(file);
// 阅读文件完成后触发的事件
reader.onload = function () {
$("#avatar_img").attr("src", this.result); // 读取的URL结果：this.result
}
});
// 提交注册数据
$(".regBtn").click(function () {
var $formData = new FormData();
$formData.append("user", $("#id_user").val());
$formData.append("pwd", $("#id_pwd").val());
$formData.append("repeat_pwd", $("#id_repeat_pwd").val());
$formData.append("email", $("#id_email").val());
$formData.append("valid_code", $("#id_valid_code").val());
var file = $("#avatar_file")[0].files[0];
$formData.append("file_img", file);
$formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
$.ajax({
url: "/register/",
type: "POST",
data: $formData,
processData: false,
contentType: false,
success: function (data) {
if (data.user) {
location.href = "/login/"
}
else {
$("span").html("");
$(".form-group").removeClass("has-error");
console.log(data.errors); // {"user":["",""],"pwd":["",""]}
$.each(data.errors, function (i, j) { // i : 错误字段名称 j: 该字段所有错误列表
$("#id_" + i).next().addClass("pull-right").css("color", "red").html(j[0]).parent().parent().addClass("has-error");
// __all__校验的是全局钩子
if (i == "__all__") {
$("#id_repeat_pwd").next().addClass("pull-right").css("color", "red").html(j[0]).parent().parent().addClass("has-error");
}
})
}
}
})
})
</script>
</body>
</html>
register.html
/*距顶端50px*/
.container {
margin-top:100px;
}
body {
background-color: #eeeeee;
}
/*头像与文件上传叠在一起,参照物是.avatar_box,已定位的父亲*/
#avatar_img {
width: 60px;
height: 60px;
left:;
top:;
}
#avatar_file {
width: 60px;
height: 60px;
position: absolute;
left:;
top:;
opacity:;
}
.avatar_box {
position: relative;
}
register.css
from django import forms
from django.forms import widgets
from .models import UserInfo
from django.core.exceptions import NON_FIELD_ERRORS, ValidationError
class RegForm(forms.Form):
def __init__(self, request, *args, **kwargs):
super().__init__(*args, **kwargs)
self.request = request
user = forms.CharField(min_length=5, max_length=12,
error_messages={"min_length": "最小长度为5"},
widget=widgets.TextInput(attrs={"class": "form-control", "placeholder": "Username"})
)
pwd = forms.CharField(
widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "Password"})
)
repeat_pwd = forms.CharField(
widget=widgets.PasswordInput(attrs={"class": "form-control", "placeholder": "Confirm Password"})
)
email = forms.EmailField(error_messages={"invalid": "格式错误！"},
widget=widgets.EmailInput(attrs={"class": "form-control", "placeholder": "Email"})
)
valid_code = forms.CharField(
widget=widgets.TextInput(attrs={"class": "form-control", "placeholder": "Validcode"})
)
def clean_user(self):
user = UserInfo.objects.filter(username=self.cleaned_data.get("user"))
if not user:
return self.cleaned_data.get("user")
else:
raise ValidationError("用户名已经存在！")
def clean_pwd(self):
pwd = self.cleaned_data.get("pwd")
if pwd.isdigit() or pwd.isalpha():
raise ValidationError("不能是纯数字或者纯字母")
else:
return pwd
def clean_valid_code(self):
val = self.cleaned_data.get("valid_code") # 用户输入的验证码
if val.upper() == self.request.session.get("valid_code_str").upper():
return self.cleaned_data.get("valid_code")
else:
raise ValidationError("valid code error！")
def clean(self):
if self.cleaned_data.get("pwd"):
if self.cleaned_data.get("pwd") == self.cleaned_data.get("repeat_pwd"):
return self.cleaned_data
else:
raise ValidationError("两次密码不一致！") # key 是__all__
forms.py
from django.shortcuts import render, redirect, HttpResponse
import random
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO
from PIL import Image
from django.contrib import auth
from django.http import JsonResponse
from .models import *
def get_valid_img(request):
def get_random_color():
# 生成随机色
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
def get_random_char():
# 生成随机字符
random_num = str(random.randint(0, 9)) # 随机数字
random_upper_alph = chr(random.randint(65, 90)) # 随机大写字母
random_lowwer_alph = chr(random.randint(79, 122)) # 随机小写字母
random_char = random.choice([random_num, random_lowwer_alph, random_upper_alph])
return random_char # 返回随机字符
# 生成画布图片
image = Image.new(mode="RGB", size=(230, 33), color=get_random_color())
# 生成画笔
draw = ImageDraw.Draw(image, mode="RGB")
# 指定字体
font = ImageFont.truetype("blog/static/font/kumo.ttf", 32)
valid_code_str = "" # 用来拼接验证码
# 写入6个随机字符(数字，字母)
for i in range(1, 6):
char = get_random_char()
valid_code_str += char # 拼接验证码
draw.text([i * 40, 5], char, get_random_color(), font=font)
width = 230
height = 33
# 生成80个点
for i in range(80):
draw.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color())
# 生成两根干扰线
for i in range(2):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, height)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=get_random_color())
# 暂存内存
f = BytesIO()
image.save(f, "png")
# 从内存中取
data = f.getvalue()
# 将验证码保存在session
request.session["valid_code_str"] = valid_code_str
return HttpResponse(data)
def log_in(request):
if request.is_ajax():
user = request.POST.get('username')
pwd = request.POST.get('pwd')
valid_code = request.POST.get('valid_code')
# 获取session里面的验证码
valid_code_str = request.session.get("valid_code_str")
# 也可以这样写：valid_code_str=request.session["valid_code_str"]
loginResponse = {"user": None, "error_msg": ''}
# 先对验证码进行校验(不区分大小写)
if valid_code_str.upper() == valid_code.upper():
# 验证码通过，再对用户名密码进行校验(要导入auth)
user = auth.authenticate(username=user, password=pwd)
if user:
auth.login(request, user) # 设置session
loginResponse["user"] = user.username
else:
loginResponse["error_msg"] = "username or password is wrong!"
else:
# 验证码不通过，不再进行下面的验证，直接返回提示错误信息
loginResponse["error_msg"] = " valid code is wrong!"
# JsonResponse可完成json数据的转换工作，简便！
return JsonResponse(loginResponse)
return render(request, 'login.html')
def index(request):
return render(request, 'index.html')
from blog.forms import *
from .forms import *
def register(request):
# ajax请求：
if request.is_ajax():
regForm = RegForm(request, request.POST)
regResponse = {"user": None, "errors": None}
if regForm.is_valid():
# 注册
data = regForm.cleaned_data
user = data.get("user")
pwd = data.get("pwd")
email = data.get("email")
avatar_img = request.FILES.get("file_img")
user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_img)
regResponse["user"] = user
else:
regResponse["errors"] = regForm.errors
return JsonResponse(regResponse)
# get请求：
regForm = RegForm(request)
return render(request, "register.html", {"regForm": regForm})
views.py
from django.conf.urls import url
from django.contrib import admin
from blog import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 登录
url(r'^login/', views.log_in),
# 验证码
url(r'^get_valid_img/', views.get_valid_img),
# 注册
url(r'^register/', views.register),
# 主页
url(r'^$', views.index),
url(r'^index/', views.index),
]
urls.py
效果图：
错误提示：
Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册的更多相关文章
- Jcrop+uploadify+php实现上传头像预览裁剪
最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- vue开发中vue-resource + canvas 图片压缩、上传、预览
1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...
- JQuery插件：图片上传本地预览插件，改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
随机推荐
- HTTP使用 multipart/form-data 上传多个字段（包括文件字节流 octet-stream）
自己用到的一个向服务器上传多个字段的实例,代码不全,仅做参考. 用的是WinINet,上传的字段中包括文件字节流 /* PHttpRequest中自行组装body之后,HttpSendRequest中 ...
- UVALive 5840 数学题
DES:给出三种材料A,B,C每种的个数.然后组合AB,BC,AC的利润.问能获得的最大利润是多少. 开始一点思路都没有.然后发现可以枚举其中两种的个数.那么最后一种就确定了.还是感觉很机智. #in ...
- VGA
VGA(Video Graphics Array )视频图形阵列,是IBM在1987年随PS/2机一起推出的一种视频传输标准,具有分辨率高.显示速率快.颜色丰富等优点,在彩色显示器领域得到了广泛的应用 ...
- scrapy-redis介绍（一）
scrapy是python里面一个非常完善的爬虫框架,实现了非常多的功能,比如内存检测,对象引用查看,命令行,shell终端,还有各种中间件和扩展等,相信开发过scrapy的朋友都会觉得这个框架非常的 ...
- bzoj2209
题解: splay打标机 往下传递 记录x,y为化简后,区间有多少(,) 代码: #include<bits/stdc++.h> ; using namespace std; ],sum[ ...
- 1022 D进制的A+B
输入两个非负 10 进制整数 A 和 B (≤2^30−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. 输出格式: 输 ...
- beta阶段贡献分配实施
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2281] 要求1 每位组员的贡献分值 刘莹莹 王玉潘 潘世维 周昊 赵美增 ...
- ODBC 安装/使用/编程
前言: 主要讲解ODBC API, 以mysql为例, 从配置到安装, 再到具体的编程, 以期对ODBC有个初步的认识. *) 下载mysql, 选择社区版mysql, 并安装 http://dev. ...
- word2vec 小测试
Bag-of-words Model Previous state-of-the-art document representations were based on the bag-of-words ...
- 百度地图API 绘制轨迹历史
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...