1.在注册，登陆时用django自带的auth模块后，需要在setting中设置
告诉Django项目用哪张表做认证
AUTH_USER_MODEL = 'blog.UserInfo'
2.用户上传的图片应放到同一个文件下，一般放在media文件，在django中给新建media文件
#在setting中设置
# Django用户上传的都叫media文件
MEDIA_URL = "/media/"
# media配置，用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
1.上传文件(在form和ajax）
urls文件 from django.conf.urls import url from app import views url(r'^upload/', views.upload),
html文件：
1.使用form提交时:
1.action一定要设置路径，如果为空，默认当前路径 2.method设置为post 3.input标签里写上name属性4.注意csrf阻拦
文件类型为files时：
1.form表单中一定要设置enctype="multipart/form-data
2.视图函数中取数据：
file_obj=request.FILES.get("name")
file_obj.name
2.Ajax传文件类型的数据时：
1.必须设置：processData: false, // 告诉jQuery不要处理我的数据
contentType: false,
2.data必须是FormData() 即要传的数据不在放在data大字典中，需要封装到FormData中
var formData = new FormData(); formData.append("username", $("#id_username").val()); formData.append("password", $("#id_password").val()); formData.append("avatar", $("#id_avatar")[0].files[0]); data=FormData
<form action="/upload/,method="post",enctype="multipart/form-data> < input type = "file" name = "upload_file" > < input type = "submit" value = "开始上传" > </form>
views文件
from django.shortcuts import HttpResponse,render,redirect def upload(request): if request.method=="POST": file为页面上type = files类型input的name属性值 print(request.FILES) #{'upload_file': [<InMemoryUploadedFile: 0020033025290064_b.jpg (image/jpeg)>]}> file_obj=request.FIlES.get('upload_file') filename=file_obj.name with open(filename,"wb") as f: #默认保存在根目录下，可使用os.path.join(a,b)重新定义存放的位置 # 从上传的文件对象中一点一点读 for chunk in request.FILES['file'].chunks(): f.write(chunk) ##从上传的文件对象中一行一行 for line in file_obj: f.write(line) return HttpResponse("上传成功") return render(request,"upload.html")
2.文档的加载
文档的加载是需要时间的 1.代码从上向下执行 <head> <meta charset="UTF-8"> <title>文档加载完之后</title> <script> var dlEle=document.getElementById("d1") alert(d1Ele.innerText); </script> </head> <body> <div id="d1">我是div</div> </body> 先执行script中的代码，找到id为d1的标签，此时还未执行到这个标签，因此取值为null，弹出null 2. <head> <meta charset="UTF-8"> <title>文档加载完之后</title> <script> window.onload = function(){ var dlEle=document.getElementById("d1") alert(d1Ele.innerText); }; </script> </head> <body> <div id="d1">我是div</div> </body> 等到文档加载完之后，找到这个标签，再弹出
3.上传头像
1.在models中设置头像字段：使用相对路径，不能使用绝对路径
avatar = models.FileField(upload_to="avatars/", default="avatars/default.png", verbose_name="头像")
头像会保存在根目录下的avatars文件中,如果将avatar放到media下,用户头像仍会让在avatars中
2.html中
3.views接收到头像文件：avatar_img = request.FILES.get("avatar")
<div class="form-group"> <label class="col-sm-2 control-label">头像</label> <div class="col-sm-8"> <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt=""></label> <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none"> <span class="help-block"></span> </div> </div> <script> // 找到头像的input标签绑定change事件 $("#id_avatar").change(function () { // 1. 创建一个读取文件的对象 var fileReader = new FileReader(); // 取到当前选中的头像文件 // console.log(this.files[0]); // 读取你选中的那个文件 fileReader.readAsDataURL(this.files[0]); // 读取文件是需要时间的 fileReader.onload = function () { // 2. 等上一步读完文件之后才 把图片加载到img标签中 $("#avatar-img").attr("src", fileReader.result); }; });
4.整体代码：
''' from django import forms from django.core.exceptions import ValidationError from blog import models # 定义一个注册的form类 class RegForm(forms.Form): username = forms.CharField( max_length=16, label="用户名", error_messages={ "max_length": "用户名最长16位", "required": "用户名不能为空", }, widget=forms.widgets.TextInput( attrs={"class": "form-control"}, ) ) password = forms.CharField( min_length=6, label="密码", widget=forms.widgets.PasswordInput( attrs={"class": "form-control"}, render_value=True, ), error_messages={ "min_length": "密码至少要6位！", "required": "密码不能为空", } ) re_password = forms.CharField( min_length=6, label="确认密码", widget=forms.widgets.PasswordInput( attrs={"class": "form-control"}, render_value=True, ), error_messages={ "min_length": "确认密码至少要6位！", "required": "确认密码不能为空", } ) email = forms.EmailField( label="邮箱", widget=forms.widgets.EmailInput( attrs={"class": "form-control"}, ), error_messages={ "invalid": "邮箱格式不正确！", "required": "邮箱不能为空", } ) # 重写username字段的局部钩子 def clean_username(self): username = self.cleaned_data.get("username") is_exist = models.UserInfo.objects.filter(username=username) if is_exist: # 表示用户名已注册 self.add_error("username", ValidationError("用户名已存在")) else: return username # 重写email字段的局部钩子 def clean_email(self): email = self.cleaned_data.get("email") is_exist = models.UserInfo.objects.filter(email=email) if is_exist: # 表示邮箱已注册 self.add_error("email", ValidationError("邮箱已被注册")) else: return email # 重写全局的钩子函数，对确认密码做校验 def clean(self): password = self.cleaned_data.get("password") re_password = self.cleaned_data.get("re_password") if re_password and re_password != password: self.add_error("re_password", ValidationError("两次密码不一致")) else: return self.cleaned_data '''
''' def register(request): if request.method == "POST": print(request.POST) print("=" * 120) ret = {"status": 0, "msg": ""} form_obj = forms.RegForm(request.POST) print(request.POST) # 帮我做校验 if form_obj.is_valid(): # 校验通过，去数据库创建一个新的用户 form_obj.cleaned_data.pop("re_password") avatar_img = request.FILES.get("avatar") models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img) ret["msg"] = "/index/" return JsonResponse(ret) else: print(form_obj.errors) ret["status"] = 1 ret["msg"] = form_obj.errors print(ret) print("=" * 120) return JsonResponse(ret) # 生成一个form对象 form_obj = forms.RegForm() print(form_obj.fields) return render(request, "register.html", {"form_obj": form_obj}) # return render(request, "form_test.html", {"form_obj": form_obj}) '''
<div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form novalidate autocomplete="off" action="/reg/" method="post" class="form-horizontal reg-form" enctype="multipart/form-data"> {% csrf_token %} autocomplete="off"关掉自动补全 <div class="form-group"> <label for="{{ form_obj.username.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.username.label }}</label> <div class="col-sm-8"> {{ form_obj.username }} <span class="help-block">{{ form_obj.username.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.password.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.password.label }}</label> <div class="col-sm-8"> {{ form_obj.password }} <span class="help-block">{{ form_obj.password.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.re_password.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label> <div class="col-sm-8"> {{ form_obj.re_password }} <span class="help-block">{{ form_obj.re_password.errors.0 }}</span> </div> </div> <div class="form-group"> <label for="{{ form_obj.email.id_for_label }}" class="col-sm-2 control-label">{{ form_obj.email.label }}</label> <div class="col-sm-8"> {{ form_obj.email }} <span class="help-block">{{ form_obj.email.errors.0 }}</span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">头像</label> <div class="col-sm-8"> <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt="" style="height:80px;width:80px"></label> <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none"> <span class="help-block"></span> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="button" class="btn btn-success" id="reg-submit">注册</button> </div> </div> </form> </div> </div> </div> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script> // 找到头像的input标签绑定change事件。实现选中图片的预览功能 $("#id_avatar").change(function () { // 1. 创建一个读取文件的对象 var fileReader = new FileReader(); // 取到当前选中文件对象 // console.log(this.files[0]); // 读取你选中的那个文件 fileReader.readAsDataURL(this.files[0]); // 读取文件是需要时间的 fileReader.onload = function () { // 2. 等上一步读完文件之后才 把图片加载到img标签中 $("#avatar-img").attr("src", fileReader.result); }; }); // AJAX提交注册的数据 $("#reg-submit").click(function () { // 取到用户填写的注册数据，向后端发送AJAX请求 var formData = new FormData(); formData.append("username", $("#id_username").val()); formData.append("password", $("#id_password").val()); formData.append("re_password", $("#id_re_password").val()); formData.append("email", $("#id_email").val()); formData.append("avatar", $("#id_avatar")[0].files[0]); formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val()); $.ajax({ url: "/reg/", type: "post", processData: false, // 告诉jQuery不要处理我的数据 在传文件时form表单里要写enctype="multipart/form-data" 在ajax中提交文件时要设置 processData和contentType contentType: false, // 告诉jQuery不要设置content类型 data: formData, success:function (data) { if (data.status){ // 有错误就展示错误 // console.log(data.msg); // 将报错信息填写到页面上 k为有错误信息的字段名，v为错误值类型为列表 $.each(data.msg, function (k,v) { // console.log("id_"+k, v[0]); // console.log($("#id_"+k)); // 所有输入框的id均为id_字段名 通过$("#id_"+k)找到{{ form_obj.email }} 这个输入框使用next找到下一个（错误标签） $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error"); }) }else { // 没有错误就跳转到指定页面 location.href = data.msg; } } }) }); // 将所有的input框绑定获取焦点的事件，将所有的错误信息清空 $("form input").focus(function () { $(this).next().text("").parent().parent().removeClass("has-error"); }); // 给username input框绑定一个失去焦点的事件，失去焦点之后就校验用户名是否已被注册 {#$("#id_username").blur(function () {#} $("#id_username").on("input", function () { // 取到用户填写的值 var username = $(this).val(); // 发请求 $.ajax({ url: "/check_username_exist/", type: "get", data: {"username": username}, success: function (data) { if (data.status){ // 用户名已被注册 $("#id_username").next().text(data.msg).parent().parent().addClass("has-error"); } } }) }) </script>