一个简单的注册页面：

<!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. JDBC批量插入blob数据

    图片从接口读取后是base64的字符串,所以转成byte数组进行保存. 我们一般保存数据的话,都是基本数据,对于这些图片数据大部分会将图片保存成Blob,Clob等. Blob存储的是二进制对象数据( ...

  2. 论文笔记 — MatchNet: Unifying Feature and Metric Learning for Patch-Based Matching

    论文:https://github.com/ei1994/my_reference_library/tree/master/papers 本文的贡献点如下: 1. 提出了一个新的利用深度网络架构基于p ...

  3. iostream,iostream.h差异

    1. 不加.h的是现在C++中规定的标准,目的在于使C++代码用于移植和混合嵌入时不受扩展名.h的限制, 避免因为.h而造成的额外的处理和修改而加.h的是c语言的用法,但是在c++中也支持这种用法, ...

  4. 分布式_理论_02_Base 理论

    一.前言 五.参考资料 1.分布式理论(二)——Base 理论 2.分布式理论(二) - BASE理论

  5. hive_学习_01_hive环境搭建(单机)

    一.前言 本文承接上一篇:hbase_学习_01_HBase环境搭建(单机),主要是搭建 hive 的单机环境 二.环境准备 1.说明 hive 的下载来源有: 官方版本:http://archive ...

  6. C++string类整理

    string类 string类 头文件:#include<string> 名称空间:using namespace std; 初始化: string Str; String类的构造函数和析 ...

  7. 20165210 Java第二次实验报告

    20165210 实验二 Java面向对象程序设计 一.面向对象程序设计1--单元测试和TDD 实验要求 参考 http://www.cnblogs.com/rocedu/p/6371315.html ...

  8. C++中关于strtok()函数的用法

    strtok: #include <string.h> char *strtok(char *str, const char *delim); char *strtok_r(char *s ...

  9. mount: error mounting /dev/root on /sysroot as ext3: Invalid argument

    /************************************************************************ * mount: error mounting /d ...

  10. BZOJ - 4196 软件包管理器 (树链剖分+dfs序+线段树)

    题目链接 设白色结点为未安装的软件,黑色结点为已安装的软件,则: 安装软件i:输出结点i到根的路径上的白色结点的数量,并把结点i到根的路径染成黑色.复杂度$O(nlog^2n)$ 卸载软件i:输出结点 ...