{{ form_obj.username.label }}
{{ form_obj.password.label }}
{{ form_obj.re_password.label }}
{{ form_obj.email.label }}
头像
注册
var fileReader=new FileReader;//在更改前端图片之前,把文件内容读取完
fileReader.readAsDataURL(this.files[0]);//读取文件是需要时间的//文件读取完后,重新加载到img当中
fileReader.οnlοad=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整个标签// 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");
})