一个简单的注册页面：

<!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-上传头像并预览的更多相关文章

  1. django 上传头像并预览 3选1

    注册页面的头像上传 register.html<!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  3. Ajax上传图片以及上传之前先预览

    手头上有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果 ...

  4. 关于confluence上传文件附件预览查看时出现乱码的问题解决办法

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

  5. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  6. confluence上传文件附件预览乱码问题（linux服务器安装字体操作）

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

  7. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  8. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  9. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

随机推荐

  1. BZOJ 2752 [HAOI2012]高速公路(road)：线段树【维护区间内子串和】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2752 题意: 有一个初始全为0的,长度为n的序列a. 有两种操作: (1)C l r v: ...

  2. Struts2学习（2）

    1.结果嗯配置 (1)全局结果页面 (2)局部结果页面 (3)result标签type属性 2.在action获取表单提交数据 (1)使用ActionContext类获取 (2)使用ServletAc ...

  3. HYSBZ - 2038经典莫队算法题

    无修改的莫队 emmm莫队的几条性质,必须是离线的,复杂度是n*sqrt(n) 就是通过预处理查询区间,然后从(l,r)转移到(ll,rr),这样的复杂度是曼哈顿距离,即abs(l-ll)+abs(r ...

  4. Django - Ajax分页

    目前总结了2种方法: 1. Ajax 分页 尼玛各种google,stackoverflow,搞了好久才总结出这个,之前使用Pagination tag loading的方式不好用,并且不能进行aja ...

  5. 炫酷tab栏--第三方开源--NavigationTabStrip

    github下载地址:https://github.com/DevLight-Mobile-Agency/NavigationTabStrip 这个开源项目很强大,只是一个自定义的控件,只有一个类 / ...

  6. 在Java中定义常量

    方法一采用接口(Interface)的中变量默认为static final的特性. 方法二采用了Java 5.0中引入的Enum类型. 方法三采用了在普通类中使用static final修饰变量的方法 ...

  7. 让camera实现类似cs第一人称视角旋转和位移

    直接把这个脚本挂在摄像机上就可: using System.Collections; using System.Collections.Generic; using UnityEngine; /* * ...

  8. idea 创建maven工程(入门)

    转:http://blog.csdn.net/qq_32588349/article/details/51461182 1. 下载Maven 官方地址:http://maven.apache.org/ ...

  9. [BZOJ4573][ZJOI2016]大♂森林

    bzoj luogu uoj sol \(orz\ \ HJT\ \ dalao\)教会我做这道题. 考虑每两个相邻位置的树的差异. 对于一个1操作(更换生长节点),假设区间是\([l,r]\),那么 ...

  10. Codeforces 808F. Card Game

    题目大意 一个物品有三个属性 : 价值,键值,等级. 你不能选取等级高于\(level\)的物品,键值之和为质数的两个数字不共存. 问最低的等级使得可以选出价值之和超过\(k\)的物品. \(n\le ...