<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container-fluid">

    <div class="row">

        <div class="col-md-6 col-md-offset-3">

            <h2 class="text-center">注册</h2>

            <hr>

            <form id="myform">

                {% csrf_token %}

　　　　　　　　<p>用户名
    　　　　　　　　<input type="text" id="username" class="form-control "
           　　　　name='username'>
　　　　　　　　</p>
　　　　　　　　<p>密码
    　　　　　　　　<input type="password" id="password" name="password" class="form-control"
           　　　　value="{{ error.old_password }}">
　　　　　　　　</p>
　　　　　　　　<p>再次输入密码
    　　　　　　<input
            　　　　type="password" id="re_password" name="re_password" class="form-control"
            　　　　value="{{ error.new_password }}">
　　　　　　　　</p>
　　　　<div class="form-group">
　　　　 <label for="id_myfile">头像 
　　　　　　<img src="/static/img/default.png" alt="" width="80" style="margin-left: 20px" id="id_img">  
　　　　　　//先给img一个默认图片路径，然后隐藏文件选择input框，label指向文件选择input框，当点击img图片的时候就触发了文件选择框
　　　　</label>
 　　　　<input type="file" name="myfile" id="id_myfile" style="display: none"> 
　　　　</div> 
　　　　　　<button class="btn btn-primary pull-right" id="id_submit">注册</button> 
　　　　</div> 
　　</div> 
</div> 
<script> 
$('#id_myfile').change(function () {
　　 // 先获取用户上传的文件对象  
　　let fileObj = this.files[0]; 
　　// 生成一个内置对象  
　　let fileReader = new FileReader(); 
　　// 将文件对象传递给内置对象  
　　fileReader.readAsDataURL(fileObj); 
　　// 将读取出文件对象替换到img标签  
　　fileReader.onload = function(){ 
　　// 等待文件阅读器读取完毕再渲染图片  
　　$('#id_img').attr('src',fileReader.result) } });
　　　　 // ajax提交数据  
　　　　$('#id_submit').click(function () {
 　　　　// 生成一个Formdata对象 
 　　　　let formData = new FormData();
 　　　　// 往Formdata对象中添加键值
 　　　　// $('#myform').serializeArray() 得到的数据格式是[{'username':'egon'}，{'password':'123'}，{}，{}...]
　　　　　// $.each([obj1.obj2,obj3],function(index,obj){ 执行语句 })  <==> pyhton中的for循环，index是列表中的索引

        $.each($('#myform').serializeArray(),function (index,obj) {

            // console.log(index,obj)
　　　　　　　//打印  1 obj1
　　　　　　　　// 　 2 obj2
　　　　　　　　//　　　....     index得到的是索引

            formData.append(obj.name,obj.value)

        });

        // 手动添加文件数据

        formData.append('myfile',$('#id_myfile')[0].files[0]);

        $.ajax({

            url:'',

            type:'post',

            data:formData,

            // 传输文件需要指定的两个参数

            processData:false,

            contentType:false,    //告诉django不要处理数据

            success:function (data) {   //模拟后台处理后返回结果data，格式；{'code':100,'msg':'...', ....}

                if (data.code == 100){

                    // 跳转到登录页面

                    location.href = data.url  //后端传来的路由地址

                } else{

                    $.each(data.msg,function (index,obj) {

                        //如果注册失败通过data.code的值告诉前端执行结果，然后通过data.msg告诉前端需要进行的操作

                    })

                }

            }

        })

    });

</script>

</body>

</html>

JS之ajax实现注册页，小文件传输的更多相关文章

  1. linux上大文件切割成小文件传输

    使用tar命令进行压缩,使用split进行切割 压缩并分割: tar -zcvf - admin- |split -b 100m -d admin-.tar.gz 解压: 先合并成tar包在解压 ca ...

  2. JS如何在本地读取json等文件

    JS使用ajax等在本地读取文件的时候,会报如下的错误: 解决方法一: npm install http-server -g  全局安装 http-server 下载完成之后再在目标文件中cmd中输入 ...

  3. 【RL-TCPnet网络教程】第38章 TFTP简单文件传输基础知识

    第38章      TFTP简单文件传输基础知识 本章节为大家讲解TFTP(Trivial File Transfer Protocol,简单文件传输协议)的基础知识,方便后面章节的实战操作. (本章 ...

  4. js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  5. js进阶ajax函数封装（匿名函数作为参数传递）（封装函数引入文件的方式非常好用）

    js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...

  6. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  7. 【JS】ajax 实现无刷新文件上传

    一.摘要 最近在做个东西,需要实现页面无刷新文件上传,目前看到的方法有两种 1) 通过隐藏iframe 实现页面无刷新,适用于不关心上传结果 <form target="hiddenF ...

  8. 用JS实现AJAX

    用JS实现AJAX   准备工作:新建网站,建立两个页面,index.aspx和backstage.aspx, 在工程目录下新建一个文件夹命名和image,在这里添加一个loading.gif,模拟提 ...

  9. 原生JS写Ajax的请求函数

    一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...

随机推荐

  1. 解决InputStream中数据读取不完整问题

    转载:https://blog.csdn.net/lilidejing/article/details/37913627 当需要用到InputStream获取数据时,这时就需要读取InputStrea ...

  2. python 使用流式游标 读取mysql怎么不会内存溢出

    使用过java读取mysql大数据量的人应该都知道,如果查询时不开游标不设置一次性区大小的话,会一次性的把所有记录都拉取过来再进行后续操作,数据量一大就很容易出现OOM 如果用python去读取mys ...

  3. 013_使用 user.txt 文件中的人员名单,在计算机中自动创建对应的账户并配置初始密码

    for i in `cat user.txt`do    useradd $i    echo "123456" | passwd --stdin $idone

  4. [Luogu] U18430 萌萌的大河

    https://www.luogu.org/problemnew/show/U18430 思路比较好想 树链剖分 对于1操作 只需将以该点为根的子树打标记,将所有数存入数组排序 每次进行1操作时,判断 ...

  5. [Luogu] 网络

    https://www.luogu.org/problemnew/show/P3250 树链剖分 + 线段树 + 优先队列 要求未被影响的请求中最大的 所以每次将每条路径在整棵树上的补集的每个节点的优 ...

  6. Luogu5298 [PKUWC2018]Minimax

    太久没写博客了,过来水一发. 题目链接:洛谷 首先我们想到,考虑每个叶节点的权值为根节点权值的概率.首先要将叶节点权值离散化. 假设现在是$x$节点,令$f_i,g_i$分别表示左/右节点的权值$=i ...

  7. web软件测试基础系统测试简化理论

    系统测试点主要如下 1.系统测试基础-2.测试对象与测试级别-3.系统测试类型-4.系统测试方法-5.系统测试之软件测试质量. 1.系统测试:是尽可能彻底地检查出程序中的错误,提高软件系统的可靠性. ...

  8. java.security.InvalidKeyException: Illegal key size or default parameters

    今天在使用idea打包maven项目时,出现这个错误:java.security.InvalidKeyException: Illegal key size or default parameters ...

  9. HDU 4380 Farmer Greedy（叉积和三角形知识的综合应用）

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=115760#problem/A 题目意思大致为由n个点(n小于100)和m个金矿 ...

  10. html 刷新更新背景图

    需求:每次刷新页面,随机获取背景图 实现方式: 1 通过js动态生成标签 <body> <script type="text/javascript"> va ...