一个简单的注册页面：

<!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. dataframe to sql

    使用pandas的to_sql时,还涉及到一些sql数据库的操作 在网上找到一段代码,很方便使用.来源:blog.csdn.net/qcyfred/article/details/78085243?l ...

  2. java集合转换成json时问题和解决方法

    json+hibernate死循环问题的一点见解,有需要的朋友可以参考下. [问题]如题所示,在我们使用hibernate框架而又需要将对象转化为json的时候,如果配置了双向的关联关系,就会出现这个 ...

  3. js数组的操作方法

    es5中新添加的方法比如map,reduce之类的

  4. Mssql 跨域查询

    有数据库test1和数据库test2.其中test1中有表 table1.table2:test2 中有表 table1.三个表的字段都为为:id.xingming.shijian.shuliang. ...

  5. 关于使用java开发Mis系统的相关内容。

    怎样使用java编程语言开发一个小型的信息管理系统,首先我们要知道用什么样的方法来开发这一系统. 1.java简单基础知识: (1)Java的三种技术架构: 1)JAVAEE:Java Platfor ...

  6. 用urliso把linux刻录U盘失败无数次。 用unetbootin试试可以启动的。

    我用的是ubuntu 16.04 lts 画面挺好用的.

  7. php中实现将姓名拆分为姓氏和名字

    之前有分享了用javascript在客户端进行姓名拆分的方法,后应项目需要,又用PHP实现了,贴出来 跟大家分享交流: /** * 把全名拆分为姓氏和名字 * @param string $fulln ...

  8. bzoj 4710 分特产

    有 $n$ 个人,$m$ 种物品,每种物品有 $a_i$ 个,求每个人至少分到一个的方案数 $n,m,a_i \leq 2000$ sol: 比上一个题简单一点 还是考虑容斥 每个人至少分到一个 = ...

  9. CAP理论、BASE理论

    从分布式一致性谈到CAP理论.BASE理论 https://www.cnblogs.com/szlbm/p/5588543.html 问题的提出 在计算机科学领域,分布式一致性是一个相当重要且被广泛探 ...

  10. webpack 配置简单说几句 ？

    前言 这几天在准备一个单页面应用, 准备试试webpack神器,在准备webpack下的知识点,顺便记录下一些使用的心得. webpack 的配置说明 在近来的前端开发中,业务逻辑复杂化,层次多样化, ...