一个简单的注册页面：
<!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>