一个简单的注册页面：

<!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. Codeforces Round #273 (Div. 2) A , B , C 水，数学，贪心

    A. Initial Bet time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  2. Android Sqlite 批量插入性能优化

    db.beginTransaction(); try { for (...) { db.execSQL("...", new Object[]{}); } db.setTransa ...

  3. review16

    java.lang包中的Math类包含许多用来进行科学计算的方法,这些方法可以直接通过类名调用. Math类中还有两个静态常量E和PI,分别表示自然对数和圆周率. 以下是Math类的常用方法 pulb ...

  4. [Kafka] - Kafka内核理解：消息存储机制

    一个Topic分为多个Partition来进行数据管理,一个Partition中的数据是有序.不可变的,使用偏移量(offset)唯一标识一条数据,是一个long类型的数据 Partition接收到p ...

  5. 5.3 Razor语法基础

    以往开发ASP.NET Web Form时,在ASPX页面上都会出现许多夹杂C#/VB.NET与HTML的情况,而先前使用<%...%>这种传统圆角括号的表示法会让HTML标签与ASP.N ...

  6. 插入排序—希尔排序（Shell`s Sort）原理以及Java实现

    希尔排序是1959 年由D.L.Shell 提出来的,相对直接排序有较大的改进.希尔排序又叫缩小增量排序 基本思想: 先将整个待排序的记录序列分割成为若干子序列分别进行直接插入排序,待整个序列中的记录 ...

  7. 【微信小程序+ES6新特性应用】字符串模板：美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...

  8. L115

    The reasons of reading books - part I1. You will optimize your brain powerThis shouldn't come as a s ...

  9. UVALive 3708 Graveyard（思维题）

    将原有的每个雕塑的坐标位置,映射在一个总长为n+m的数轴上,设第一个点的坐标为0,(新的等分点必然有至少有一个和原来n等分的等分点重合,因为等分点可以等距的绕圆周旋转,总可以转到有至少一个重合的,不妨 ...

  10. 《Javascript高级程序设计》阅读记录（五）：第六章 上

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...