<!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. BZOJ 1299: [LLH邀请赛]巧克力棒 【SG函数/博弈分析/高斯消元】

    因为太懒,放个博客 我只写了O(2n)O(2^n)O(2n)的 CODE #include <cstdio> int n, x[15]; int main () { for(int T = ...

  2. yii行为和过滤器

    行为是对类的功能进行了扩展,针对开闭原则,为了类的扩展而生,不去修改类原有的代码. yii的行为需要继承yii\base\Behavior,这就好比你要给人安装一个胳膊,这个胳膊得是人的,而不能是老虎 ...

  3. P4475 巧克力王国 k-d tree

    思路:\(k-d\ tree\) 提交:2次 错因:\(query\)时有一个\(mx\)误写成\(mn\)窝太菜了. 题解: 先把\(k-d\ tree\)建出来,然后查询时判一下整个矩形是否整体\ ...

  4. Luogu P2151 [SDOI2009]HH去散步 矩乘加速DP

    思路:矩乘优化DP 提交:3次(用了一个奇怪的东西导致常数过大) 题解: 如果可以走完正向边后又走反向边那就显然了,但是不能走,所以我们要将正反向边分别编号,区分正反向边. 所以这道题的矩阵是以边的编 ...

  5. 【题解】P3069 [USACO13JAN]牛的阵容Cow Lineup-C++

    题目传送门 思路这道题目可以通过尺取法来完成 (我才不管什么必须用队列)什么是尺取法呢?顾名思义,像尺子一样取一段,借用挑战书上面的话说,尺取法通常是对数组保存一对下标,即所选取的区间的左右端点,然后 ...

  6. 005_FreeRTOS任务挂起和恢复

    (一) (二)使用,参数是任务句柄 //key任务函数 void key_task(void *pvParameters) { u8 key; ) { key=KEY_Scan(); switch(k ...

  7. React顶层API

    1.React.Children相关 1. React.Children.map(props.children, mapFunc) 1)该方法用于在props.children不透明的情况下,安全的遍 ...

  8. 参数类型 （实体类层）eneity或pojo 常用参数类型

    import java.util.Date;@TableName("p_user_base_info") public class UserBaseInfo extends Mod ...

  9. ECMAScript 5.0 基础语法（下）“稍微重点一点点”

    接上篇 七.常用内置对象(复杂数据类型)(重点) (1)数组Array 创建:例  var colors = ['red','blue','green']       #推荐这样,因为简单粗暴 或:v ...

  10. 解决zabbix的cannot allocate shared memory of size错误

    问题状态:zabbix_server 不能启动,系统CentOS 6.7 原因分析:这是因为内核对share memory的限制造成的. 用到如下命令ipcs [-m|l|a],sysctl [-a| ...