标签：pre play 注册 ada for function ade lan console
基于forms组件和Ajax实现注册功能
1 基于forms组件设计注册页面
--点击头像 === 点击input
--头像预览：
修改用户选中的文件对象；获取文件对象的路径；修改img的src属性，src=文件对象路径。
把img标签写到label里边去，点击头像就相当于点击input标签
修改 获取用户选中的文件对象；获取文件对象的路径；修改img标签的src属性，让src=文件对象路径。
register.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"> {# <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">#} <style type="text/css"> #avatar_img{ margin-left: 20px; } #avatar{ display: none; //设置让它隐藏起来 } </style> <script> window.onload= function () { //window.onload事件 $("#id_user").val("hello"); //下面所有的标签都执行加载完之后，你再给我加载这句话。它执行到这一步的时候只是把这个事件绑定下并不会执行里边的代码 } </script> </head> <body> <h3>登录页面</h3> <div class="container"> <div class="row"> <div class="col-md-6 col-lg-offset-3"> <form> {% csrf_token %} {% for field in form %} {# for 循环这个form,进行渲染#} <div class="form-group"> <label for="user">{{ field.label }}</label> //点击label就相当于点击input标签 {{ field }} </div> {% endfor %} <div class="form-group"> <label for="avatar"> 头像 // 点击头像就相当于点击input标签 //把这个img标签放到label标签里边 <img id="avatar_img" width="60" height="60" src="/static/blog/img/default.png" alt=""> //点击img标签就相当于点击input </label> <input type="file" id="avatar" > </div> <input type="button" class="btn btn-default reg_btn" value="submit"><span class="error"></span> <a href="/register/" class="btn btn-success pull-right">注册</a> </form> </div> </div> </div> <script src="/static/js/jquery-3.2.1.min.js"></script> <script> //头像预览 $("#avatar").change(function () { //获取用户选中的文件对象 $(this)就是这个input标签 var file_obj = $(this)[0].files[0]; //获取文件对象的路径 var reader = new FileReader(); reader.readAsDataURL(file_obj); //只要文件的路径，把文件传进去 //修改img的src属性 ， src=文件对象的路径 reader.onload= function () { //等加载完之后才执行里边的代码，这样子就可以预览了。 $("#avatar_img").attr("src",reader.result) }; });</script> <script> //刷新验证码 $("#valid_code_img").click(function(){ $(this)[0].src += "?" }); //登录验证 $(".login_btn").click(function(){ $.ajax({ url:"", type:"post", data:{ user:$("#user").val(), pwd:$("#pwd").val(), valid_code:$("#valid_code").val(), csrfmiddlewaretoken:$("[name = ‘csrfmiddlewaretoken‘]").val(), }, success: function (data) { console.log(data); if(data.user){ location.href="/index/" } else{ $(".error").text(data.msg).css({"color":"red", "margin-left":‘10px‘}) setTimeout(function () { $(".error").text(‘‘) //1s之后把它清空了 },1000) } } }) }) </script> </body> </html>
标签：pre play 注册 ada for function ade lan console
原文地址：https://www.cnblogs.com/shengyang17/p/9279396.html
