思路：
文件上传通过前端的input标签，input设置display:none属性。 内容显示需要让前端通过<img>标签读取图片内容，可以通过<label>标签连接<img>和<input>属性。 文件上传后通过ajax提交到后台，验证成功后，通过locations.href实现页面跳转。
前端需要使用的方法：
# 当标签内的内容出现变化时，要触发相应的方法。 $("#id").change(function(){ ... }) # 创建一个读取文件的对象 var obj = new FileReader(); # 当全部文件取完毕后，把图片加载到img标签中 onload $("id").attr("src", "图片路径") # ajax提交图片文件 var formData = new FormData(); # input框绑定获取焦点的事件 $(\'form input\').focus(function(){ ... })
设计数据库模型
class UserInfo(AbstractUser): """ 用户信息表 """ nid = models.AutoField(primary_key=True) phone = models.CharField(max_length=11, null=True, unique=True) avatar = models.FileField(upload_to="avatars/", default="avatars/default.png", verbose_name="头像") create_time = models.DateTimeField(auto_now_add=True) blog = models.OneToOneField(to="Blog", to_field="nid", null=True, on_delete=models.CASCADE) def __str__(self): return self.username class Blog(models.Model): """ 博客信息 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=64) # 个人博客标题 site = models.CharField(max_length=32, unique=True) # 个人博客后缀 theme = models.CharField(max_length=32) # 博客主题 def __str__(self): return self.title class Category(models.Model): """ 个人博客文章分类 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 分类标题 blog = models.ForeignKey(to="Blog", to_field="nid", on_delete=models.CASCADE) # 外键关联博客，一个博客站点可以有多个分类 def __str__(self): return self.title class Tag(models.Model): """ 标签 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=32) # 标签名 blog = models.ForeignKey(to="Blog", to_field="nid", on_delete=models.CASCADE) # 所属博客 def __str__(self): return self.title class Article(models.Model): """ 文章 """ nid = models.AutoField(primary_key=True) title = models.CharField(max_length=50) # 文章标题 desc = models.CharField(max_length=255) # 文章描述 create_time = models.DateTimeField() # 创建时间 category = models.ForeignKey(to="Category", to_field="nid", null=True, on_delete=models.CASCADE) user = models.ForeignKey(to="UserInfo", to_field="nid", on_delete=models.CASCADE) tags = models.ManyToManyField( # 中介模型 to="Tag", through="Article2Tag", through_fields=("article", "tag"), # 注意顺序！！！ ) def __str__(self): return self.title class ArticleDetail(models.Model): """ 文章详情表 """ nid = models.AutoField(primary_key=True) content = models.TextField() article = models.OneToOneField(to="Article", to_field="nid", on_delete=models.CASCADE) class Article2Tag(models.Model): """ 文章和标签的多对多关系表 """ nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid", on_delete=models.CASCADE) tag = models.ForeignKey(to="Tag", to_field="nid", on_delete=models.CASCADE) class Meta: unique_together = (("article", "tag"),) class ArticleUpDown(models.Model): """ 点赞表 """ nid = models.AutoField(primary_key=True) user = models.ForeignKey(to="UserInfo", null=True, on_delete=models.CASCADE) article = models.ForeignKey(to="Article", null=True, on_delete=models.CASCADE) is_up = models.BooleanField(default=True) class Meta: unique_together = (("article", "user"),) class Comment(models.Model): """ 评论表 """ nid = models.AutoField(primary_key=True) article = models.ForeignKey(to="Article", to_field="nid", on_delete=models.CASCADE) user = models.ForeignKey(to="UserInfo", to_field="nid", on_delete=models.CASCADE) content = models.CharField(max_length=255) # 评论内容 create_time = models.DateTimeField(auto_now_add=True) parent_comment = models.ForeignKey("self", null=True, on_delete=models.CASCADE) def __str__(self): return self.content
# upload_to参数会自动将图片下载到本地服务器，这里为avatar目录
通过forms设置前端字段，实现输入内容过滤：
from django import forms from django.core.exceptions import ValidationError class RegForm(forms.Form): username = forms.CharField( max_length=16, label="用户名", error_messages={ "max_length": "用户名最长16位", "required": "用户名不能为空!", }, widget=forms.TextInput( attrs={"class":"form-control", "placeholder": "用户名"}, ) ) password = forms.CharField( min_length=6, label="密码", error_messages={ "required": "密码不能为空", "min_length": "密码不能少于6位", }, widget = forms.PasswordInput( attrs={"class": "form-control", "placeholder": "密码"}, ) ) re_password = forms.CharField( min_length=6, label="确认密码", error_messages={ "required": "密码不能为空", "min_length": "密码不能少于6位", }, widget=forms.PasswordInput( attrs={"class": "form-control", "placeholder": "密码"}, ) ) email = forms.EmailField( label="邮箱", error_messages={ "invalid": "请输入正确的邮箱格式", "required": "邮箱不能为空", }, widget=forms.EmailInput( attrs={"class": "form-control", "placeholder": "邮箱"}, ) ) # 重写全局的钩子函数，对确认密码做校验 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": ret = {"status": 0, "msg": ""} form_obj = forms.RegForm(request.POST) # print(request.POST) if form_obj.is_valid(): # 数据库中没有re_password字段，需要从字典中剔除re_password字段 form_obj.cleaned_data.pop("re_password") # 接收从ajax发送过来的的图片数据 avatar_img = request.FILES.get("avatar") print(avatar_img) models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img) ret["msg"] = "/reg/" return JsonResponse(ret) else: ret["status"] = 1 ret["msg"] = form_obj.errors print(ret) return JsonResponse(ret) form_obj = forms.RegForm() return render(request, \'register.html\', {"form_obj": form_obj}) def reg(request): return render(request, \'index.html\')
前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册</title> </head> <body> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/backend.css"> <div class="container register"> <div class="row"> <div class="col-md-6 col-md-offset-3"> {# form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#} <form novalidate action="/register/" method="post" class="form-horizontal" enctype="multipart/form-data"> {% csrf_token %} <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"></label> <input type="file" id="id_avatar" style="display: none;" name="avatar"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-8"> <button id="reg-submit" type="button" class="btn btn-success">注册</button> </div> </div> </form> </div> </div> </div> {# <script src="/static/js/bootstrap.min.js"></script>#} <script src="/static/js/jquery-1.12.4.js"></script> <script> $("#id_avatar").change(function () { // 创建一个文件读取对象 var fileReader = new FileReader; // 在更改前端图片之前，把文件内容读取完 fileReader.readAsDataURL(this.files[0]); // 读取文件是需要时间的 // 文件读取完后，重新加载到img当中 fileReader.onload = function () { $("#avatar-img").attr("src", fileReader.result); } }); $("#reg-submit").click(function () { 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()); // 这里传递的是文件对象，是为了能够定位文件,后台获取到这个文件对象后会通过models字段单中的upload_to="avator"参数传递到服务器目录。 formData.append("avatar", $("#id_avatar")[0].files[0]); formData.append("csrfmiddlewaretoken", $("[name=\'csrfmiddlewaretoken\']").val()); /* console.log($("#id_avatar")); // 获取到了是一个jquery对象 // jQuery.fn.init [input#id_avatar, context: document, selector: "#id_avatar"] console.log($("#id_avatar")[0]); // 获取到了input整个标签 // <input type="file" id="id_avatar" style="display:none" name="avatar"> console.log($("#id_avatar")[0].files); // 获取了input标签当中的type="file"类型中的内容 //FileList {0: File, length: 1} // 0: File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …} // length: 1 // __proto__: FileList console.log($("#id_avatar")[0].files[0]); // 获取到了整个上传的文件内容 // File {name: "风景.jpg", lastModified: 1553135747721, lastModifiedDate: Thu Mar 21 2019 10:35:47 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 27556, …} */ $.ajax({ url: "/register/", type: "post", // 当需要传输图片的时候，需要将processData和contentType设置为false processData: false, contentType: false, data: formData, success:function (data) { // 这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"} if (data.status){ // 有错误就展示错误 // console.log(data.msg); // 将报错信息填写到页面上 $.each(data.msg, function (k,v) { // console.log("id_"+k, v[0]); // console.log($("#id_"+k)); $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error"); }) //console.log(123) }else { // 没有错误就跳转到指定页面，这里data是后端返回的一个字典ret = {"status": 0, "msg": "/reg/"} location.href = data.msg; } } }) }); // 当input获取焦点的事件，移除报错的样式，并且晴空报错信息。 $("form input").focus(function () { $(this).next().text("").parent().parent().removeClass("has-error"); }) </script> </body> </html>
路由设置
path(\'register/\', backend.register), path(\'reg/\', backend.reg),