一个简单的注册页面：

<!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. dp3--codevs2598 编辑距离问题

    dp3--codevs2598 编辑距离问题 一.心得 1.字符串相关问题dp的时候从0开始是个陷阱 二.题目 2598 编辑距离问题  时间限制: 1 s  空间限制: 128000 KB  题目等 ...

  2. webservice中将dataset 压缩

    http://blog.csdn.net/bodaowang/article/details/6889446 在webservice中将dataset序列化是我们经常遇到的问题,但是遇到很大的data ...

  3. Java map简介

    了解最常用的集合类型之一 Map 的基础知识以及如何针对您应用程序特有的数据优化 Map. 本文相关下载: · Jack 的 HashMap 测试· Oracle JDeveloper 10g jav ...

  4. TCP/IP详解学习笔记(3)-IP协议，ARP协议，RARP协议【转】

    转自:http://blog.csdn.net/goodboy1881/article/details/668556 把这三个协议放到一起学习是因为这三个协议处于同一层(网际层),ARP协议用来找到目 ...

  5. Linux下安装scrapy包出错

    pip install -i https://pypi.douban.com/simple/ scrapy 出现错误: error: command 将依赖包装全. sudo apt-get inst ...

  6. BW ON HANA 业务模型关系与数据取数

    在接到业务需求之后,我认为重要的是理清楚自己该做什么.来实现业务.由于不了解业务,还是走了很多弯路.本可以不用这么做,还是这么做了.自然你最傻瓜的按照用户的方式去实现是没有问题的. 会使后面的人难以维 ...

  7. eclipse部署和启动guns

    eclipse部署guns: 1.import -> 搜索maven -> Existing Maven Projects -> 选择guns根目录 2.修改配置文件: spring ...

  8. GEF入门实例_总结_03_显示菜单和工具栏

    一.前言 本文承接上一节: GEF入门实例_总结_02_新建初始RCP空项目 这一节,我们来给我们的插件加上菜单. 二.基础知识 1.action bar.menubar.coolbar   含义 a ...

  9. hdoj-3791-二叉搜索树(二叉搜索树模板题)

    #include <cstring> #include <cstdio> #include <iostream> using namespace std; type ...

  10. ICE 的回调

    使用分布式计算中间件ICE到现在已经有一年多了,在这一年里里面对ICE的理解.应用比较熟悉. 使用ICE写分布式软件,确实是很方便:ICE比较稳定.可靠,调用返回速度低延迟,使用简单,学习曲线不是很陡 ...