Django 实现注册时选择头像，头像预览在页面，并且在数据库中写入头像文件，Ajax参数及上传文件方式
使用场景：用户注册等
1、表结构
class UserInfo(AbstractUser): """ 用户信息表,继承auth认证模块中的默认表 """ nid = models.AutoField(primary_key=True) phone = models.CharField(max_length=11, unique=True) avatar = models.FileField(upload_to='static/img', default='static/img/default.png', verbose_name='头像') #upload_to值为头像存在本地的地址 create_time = models.DateTimeField(auto_now_add=True) # 注册时间 class Meta: verbose_name = '用户表' verbose_name_plural = verbose_name def __str__(self): return self.username
2、forms表单验证注册
from django import forms from blog import models from django.contrib.auth.backends import ModelBackend from django.db.models import Q from .models import UserInfo from django.core.validators import RegexValidator from django.core.exceptions import ValidationError """ 注册页表单 """ class Register(forms.Form): username = forms.CharField(max_length=15, min_length=2, label='用户名', error_messages={ 'max_length': '最长不能超过15位', 'min_length': '最短不能少于2位', 'required': '用户名不能为空' }, widget=forms.widgets.TextInput( attrs={"class": "form-control"}, ) ) password = forms.CharField(min_length=6, label='密码', error_messages={ 'min_length': '密码长度小于6', 'required': '密码不能为空' }, widget=forms.widgets.PasswordInput( attrs={"class": "form-control"}, ) ) rep_password = forms.CharField(min_length=6, label='确认密码', error_messages={ 'min_length': '确认密码长度小于6', 'required': '确认密码不能为空' }, widget=forms.widgets.PasswordInput( attrs={"class": "form-control"}, ) ) email = forms.EmailField(label='邮箱', error_messages={ 'invalid': '邮箱格式不正确', 'required': '邮箱不能为空' }, widget=forms.widgets.EmailInput( attrs={"class": "form-control"}, ) ) phone = forms.CharField( # max_length=11, label='手机号', validators=[RegexValidator(r'^[0-9]+$', '请输入数字'), RegexValidator(r'^0?(13|14|15|17|18|19)[0-9]{9}', '手机号有误')], error_messages={ 'max_length': '手机号不正确', 'required': '邮箱不能为空' }, widget=forms.widgets.TextInput( attrs={"class": "form-control"}, ) ) # 重写全局的钩子函数，对确认密码做校验 def clean(self): password = self.cleaned_data.get("password") rep_password = self.cleaned_data.get("rep_password") if rep_password and rep_password != password: self.add_error("rep_password", ValidationError("两次密码不一致")) else: return self.cleaned_data # 重写局部钩子函数，对手机号进行验证 def clean_phone(self): phone = self.cleaned_data.get("phone") if models.UserInfo.objects.filter(phone=phone): raise ValidationError("手机号已被注册") else: return phone # 重写局部钩子函数，对用户名进行验证 def clean_username(self): username = self.cleaned_data.get("username") if models.UserInfo.objects.filter(username=username): raise ValidationError("用户名已被注册") else: return username # 重写局部钩子函数，对邮箱进行验证 def clean_email(self): email = self.cleaned_data.get("email") if models.UserInfo.objects.filter(email=email): raise ValidationError("邮箱已被注册") else: return email
3、通过Ajax上传数据
<script> $('#id_register').on('click', function () { //注册一个formData对象 利用它来提交表单、模拟表单提交，最大用法是可以上传二进制文件，把所有数据添加到formData对象就可以 var formData = new FormData(); // 把注册数据添加到formData对象 formData.append('username', $('#id_username').val()) formData.append('password', $('#id_password').val()) formData.append('rep_password', $('#id_rep_password').val()) formData.append('email', $('#id_email').val()) formData.append('phone', $('#id_phone').val()) //把头像文件添加到formData对象 formData.append('avatar', $("#id_avatar")[0].files[0]) $.ajax({ url:'/register/', type:'post', processData: false, // 告诉jQuery不要去处理发送的数据 传文件必须设置为false contentType: false, // 告诉jQuery不要去设置Content-Type请求头 传文件必须设置为false data:formData, success:function (ret) { if (ret.state == 1){ // 如果状态码为1，代表有错误，循环存有错误信息的对象，将错误信息添加到span标签，并给输入框加上has-error样式类 //each 循环函数 $.each(ret.msg, function (k,v) { $('#id_'+k).next().text(v).parent().parent().addClass('has-error') }) }else { // 否则输入信息正确 alert('注册成功') location.href='/login/' } } }) }) // 将默认头像替换成用户选中的头像：值被修改事件 $('#id_avatar').on('change', function () { //创建一个读取文件对象 var fileReader = new FileReader() //取到当前选中的头像文件 //console.log(this.files[0]) //读取选中的头像文件 ,读取文件需要时间，需要等待读取完成才能加载到img标签中 fileReader.readAsDataURL(this.files[0]) //等待读取完毕后，将文件加载到img标签中 fileReader.onload = function () { $('#id_img').attr('src',fileReader.result) } }) </script>
4、视图views处理
def register(request): forms_obj = forms.Register() if request.method == 'POST': ret = { 'state': 0, 'msg': '', } forms_obj = forms.Register(request.POST) if forms_obj.is_valid(): # 验证通过，将数据写入数据库 forms_obj.cleaned_data.pop('rep_password') # 删除重复密码 cleaned_data存放forms对象的数据 avatar = request.FILES.get('avatar', None) # 获取头像文件 # print(avatar, type(avatar)) # 将头像 密码等，写入数据库 models.UserInfo.objects.create_user(avatar=avatar, **forms_obj.cleaned_data) return JsonResponse(ret) else: print(forms_obj.errors, type(forms_obj.errors)) # forms_obj.errors返回一个存有所有验证错误信息的对象 ret = { 'state': 1, 'msg': forms_obj.errors } return JsonResponse(ret) return render(request, 'register.html', {'forms_obj': forms_obj})
知识点：
1、forms模块的使用，手机号字段自定义正则做校验，局部钩子与全局钩子做校验。
2、Ajax上传文件的方式：利用FormData方法
3、前端预览选中的文件方式：利用FileReader方法，需要注意读取文件需要时间，需要把文件读取完毕才进行显示
4、后端接收文件及处理
Ajax的参数：
url：往哪请求
type：请求方式
dataType：json 接收的数据必须是json格式，接收后会自动反序列化，如果不是json数据，反序列化失败
data：需要发送的数据
更多参数：点击
