基于forms组件创建表单
创建forms
from django import forms from django.forms import widgets class UserInfo(forms.Form): user=forms.CharField(max_length=32,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'}))
html中渲染forms组件
<form> {% csrf_token %} {% for field in form %} <div class="form-group"> <label for="{{ field.id_for_label }}">{{ field.label }}:</label>{{ field }} </div> {% endfor %} <input type="button" class="button form-control btn-success" value="提交"> </form>
添加用户头像
添加用户图像图标
添加一个img标签,连接到static下的一个default.png文件
技巧:
- 利用label的for属性,让点击图片等同于点击input标签
- 将input[type='file']的标签隐藏掉,设置display属性为none
<div class="container"> <div class="row"> <div class="col-md-4 col-lg-offset-4"> <form> {% csrf_token %} {% for field in form %} <div class="form-group"> <label for="{{ field.id_for_label }}">{{ field.label }}:</label>{{ field }} </div> {% endfor %} <div class="form-group"> <label for="avatar">头像 <img class="avatar_img" src="/static/app/img/default.png" style="width: 60px;height: 60px;display: inline"> </label> <input type="file" id="avatar" style="display: none;"> </div> <input type="button" class="button form-control btn-success" value="提交"> </form> </div> </div> </div>
用户头像预览功能
- 获取用户选中的文件对象,通过input标签的change事件来触发
- 获取文件对象的本地路径,一定要等图片加载完成之后再来获取文件路径
- 修改img的src属性值
<script> $('#avatar').change(function () { //获取用户选中的文件对象 var file_obj=$(this)[0].files[0]; //获取当前文件对象路径 var reader=new FileReader();//实例化一个reader reader.readAsDataURL(file_obj);//读取文件对象路径,读取完成后放在reader自己内部 //待读取完后,获取url和修改imgsrc属性 reader.onload=function () { var file_url=reader.result;//获取文件路径url //修改img标签的src属性 $('#avatar_img').attr('src',file_url); }; }) </script>
用ajax提交formdata数据
ajax数据提交
- 上传的data为formdata,需要new一个
- contentType为false
- processData为false
ajax代码
<script> //提交formdata数据 $('input[type="button"]').click(function () { var formdata=new FormData(); formdata.append("user",$("#id_user").val()); formdata.append("pwd",$("#id_pwd").val()); formdata.append("re_pwd",$("#id_re_user").val()); formdata.append("email",$("#id_email").val()); formdata.append("avatar",$("#avatar")[0].files[0]); formdata.append("csrfmiddlewaretoken",$("input[name='csrfmiddlewaretoken']").val()); $.ajax({ url:'', data:formdata, type:'post', contentType:false, processData:false, success:function (data) { console.log(data) }, error:function (err) { console.log(err) } }) }) </script>
views代码,可通过is_ajax()验证,也可以通过request.POST验证
def register(request): # if request.method=='POST': if request.is_ajax(): response={"user":None,"msg":None} form=UserInfoForm(request.POST) if form.is_valid(): response['user']=form.cleaned_data.get('user'); else: print(form.cleaned_data) print(form.errors) response['msg']=form.errors return JsonResponse(response)