<!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. 总结 1121 Java面向对象

    总结 Java面向对象的基础 三大特征: 封装(抽象),继承,多态 面向对象的内存分析: 栈, 堆, 代码区, 静态区 this: 代表当前对象本身 有时候需要把当前调用对象进行传递,那么就可以使用t ...

  2. mkswap/swapon/swapoff/free

    free mkswap 创建Linux交换分区 swapon 启用交换分区 swapoff 关闭交换分区 注意: 在创建完交换区之后.是需要激活才能使用的 swapon/swapoff

  3. Codeforces Round #571 (Div. 2)

    A. Vus the Cossack and a Contest 签. #include <bits/stdc++.h> using namespace std; int main() { ...

  4. Bzoj 1086: [SCOI2005]王室联邦(分块)

    1086: [SCOI2005]王室联邦 Time Limit: 10 Sec Memory Limit: 162 MBSec Special Judge Submit: 1557 Solved: 9 ...

  5. python3.5+win7 安装 numpy 和scipy的总结

    1.安装numpy.      官网下载numpy.下载地址为https://pypi.Python.org/pypi/numpy.选择与Python版本相对应的numpy版本.之后在python35 ...

  6. C语言学习笔记5-程序结构

    本系列文章由jadeshu编写,转载请注明出处.http://blog.csdn.net/jadeshu/article/details/50752148 作者:jadeshu   邮箱: jades ...

  7. 三十、CentOS 7之systemd

    一.系统启动流程 POST --> bootloader  --> MBR工作 --> kernel(initramfs/initrd) --> ro rootfs --> ...

  8. 代码审计-Typecho反序列化getshell

    0x01 漏洞代码 install.php: <?php $config = unserialize(base64_decode(Typecho_Cookie::get('__typecho_c ...

  9. keepalived+mysql双主热备

    这里使用keepalived实现mysql的双主热备高可用 实验环境: 主机名 IP 系统版本 软件版本 master 192.168.199.6/vip:192.168.199.111 Rhel7. ...

  10. 卸载Ambari集群

    清理ambari安装的hadoop集群 本文针对redhat或者centos 对于测试集群,如果通过ambari安装hadoop集群后,想重新再来一次的话,需要清理集群. 对于安装了很多hadoop组 ...