<!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. vue文件夹上传插件选哪个好?

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  2. keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

    keyup([[data],fn]) 概述 当按钮被松开时,发生 keyup 事件.它发生在当前获得焦点的元素上. 注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生.直线电机选型 ...

  3. 关于lda算法的一个博客

    http://www.cnblogs.com/LeftNotEasy/archive/2011/01/08/lda-and-pca-machine-learning.html

  4. Spring注解驱动——组件注册系列

    1.@Configuration 从Spring3.0,@Configuration用于定义配置类,可替换xml配置文件,被注解的类内部包含有一个或多个被@Bean注解的方法,这些方法将会被Annot ...

  5. UVALive 4254 Processor ——（二分+优先队列处理）

    题目是求最小化最大值,很显然是二分,但是二分以后怎么判断mid是否可行并不容易. 代码参考了网上一个博客的代码.巧妙之处在于一秒一秒的考虑,这样可以把处理速度mid直接转化成1秒内实际的量来解决(避免 ...

  6. HDU 1074 Doing Homework ——（状态压缩DP）

    考虑到n只有15,那么状压DP即可. 题目要求说输出字典序最小的答案的顺序,又考虑到题目给出的字符串本身字典序是递增的,那么枚举i的时候倒着来即可.因为在同样完成的情况下,后选字典序大的,小的字典序就 ...

  7. 解决tomcat7控制台中文乱码问题

    控制台启动会有乱码,找了很多方法都不行,最后找到一个可用的方法,非常简单 打开tomcat/conf/logging.properties找到java.util.logging.ConsoleHand ...

  8. pwn学习日记Day20 《程序员的自我修养》读书笔记

    可执行文件的装载与进程 覆盖装入和页映射是两种典型的动态装载方法 进程建立的三步 1.创建一个独立的虚拟地址空间 2.读取可执行文件头,并且建立虚拟空间与可执行文件的映射关系. 3.将CPU的指令寄存 ...

  9. java课后实验性问题7

    1.异常处理 import javax.swing.*; class AboutException { public static void main(String[] a) { int i = 1, ...

  10. How to Publish a NuGet Package

    How to Publish a NuGet Package Command line To push packages to nuget.org you must use nuget.exe v4. ...