python实现文件上传预览_Django的文件上传以及预览、存储

注册

{#form添加novalidate参数，代表取消前端h5的验证，比如邮箱格式验证#}{% csrf_token %}

{{ form_obj.username.label }}

{{ form_obj.username }} {{ form_obj.username.errors.0 }}

{{ form_obj.password.label }}

{{ form_obj.password }} {{ form_obj.password.errors.0 }}

{{ form_obj.re_password.label }}

{{ form_obj.re_password }} {{ form_obj.re_password.errors.0 }}

{{ form_obj.email.label }}

{{ form_obj.email }} {{ form_obj.email.errors.0 }}

头像

注册

{##}

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");

})