一个简单的注册页面：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="/static/bs/css/bootstrap.css"> ???<script src="/static/js/jquery-3.2.1.min.js"></script> ???<style> ???????#avatar{ ??????/*隐藏上传按钮-*/ ???????????display: none; ???????} ??????/*设置预览头像尺寸*/ ???????.avatar_img{ ???????????width: 60px; ???????????height: 60px; ???????????margin-left: 10px; ???????} ???????.error{ ???????????color: red; ???????} ???</style></head><body><h3>注册页面</h3><div class="container"> ???<div class="row"> ???????<div class="col-md-6 col-md-offset-3"> ???????????<form> ???????????????{% csrf_token %} ???????????????<div class="form-group"> ???????????????????<label for="user">用户名</label> ???????????????????<input type="text" id="user" class="form-control"><span class="error pull-right"></span> ???????????????</div> ????????????????<div class="form-group"> ???????????????????<label for="pwd">密码</label> ???????????????????<input type="password" id="pwd" ?class="form-control"><span class="error pull-right"></span> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label for="repeat_pwd">确认密码</label> ???????????????????<input type="password" id="repeat_pwd" ?class="form-control"><span class="error pull-right"></span> ???????????????</div> ???????????????<div class="form-group"> ???????????????????<label for="email">邮箱</label> ???????????????????<input type="email" id="email" ?class="form-control"><span class="error pull-right"></span> ???????????????</div> ????????????????<div class="form-group"> ????????????????<!--label实现点击图片就能上传头像--> ????????????????<!--img显示默认图片--> ????????????????????<label for="avatar">头像 <img src="/static/img/default.png" alt="" class="avatar_img"></label> ????????????????????<input type="file" id="avatar" ?class="form-control"> ???????????????</div> ???????????????<input type="button" value="submit" class="reg_btn btn btn-default"> ???????????????<span class="error"></span> ???????????</form> ???????</div> ???</div></div><script> ???// 头像预览 ??$("#avatar").change(function () { ??????//FileReader可以读出头像在客户端存放路径 ??????var reader=new FileReader(); ??????//获取头像对象 ??????var choose_file=$(this)[0].files[0]; ??????//用reader对象录取图片对象 ??????reader.readAsDataURL(choose_file); ??????//reader需要一定时间，onload等待reader读完 ??????reader.onload=function(){ ????????????//result获取图片路径，将src的默认图片地址更换为本地头像路径 ????????????$(".avatar_img").attr("src",reader.result) ??????}; ??}) ????// 注册 ???$(".reg_btn").click(function () { ???????var formdata=new FormData(); ???????formdata.append("user",$("#user").val()); ???????formdata.append("pwd",$("#pwd").val()); ???????formdata.append("email",$("#email").val()); ???????formdata.append("repeat_pwd",$("#repeat_pwd").val()); ???????formdata.append("avatar_img",$("#avatar")[0].files[0]); ???????$.ajax({ ????????????url:"", ????????????type:"post", ????????????contentType:false, ????????????processData:false, ????????????data:formdata, ????????????success:function (data) { ????????????????// console.log(data); ????????????????var data=JSON.parse(data); ????????????????if (data.user){ ????????????????????console.log("OK") ????????????????}else{ ????????????????????// 清空操作 ????????????????????$("form span.error").html("") ????????????????????console.log(data.msg) ????????????????????$.each(data.msg,function (filed,error_list) { ????????????????????????$("#"+filed).next().html(error_list[0]) ????????????????????}) ????????????????} ????????????} ???????}) ???})</script></body></html>DAY19-上传头像并预览
原文地址：https://www.cnblogs.com/guoyunlong666/p/9038591.html