<!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. C语言学习系列（一）开门首篇

    一.特辑 此次是我自己的学习之路,和大家一起分享(我现在是做Java),途中遇到什么问题大家也可以提出来一起讨论一起进步: 主要参考教程是菜鸟教程上面的C语言教程,以及大学课本C语言教程-第四版(谭浩 ...

  2. Docker搭建Redis一主两从三哨兵

    作者:oscarwin juejin.im/post/5d26b03de51d454fa33b1960 这次实验准备了三台云主机,系统为Debian,ip分别为:35.236.172.131 ,35. ...

  3. session.getdefaultinstance和getinstance的区别

    如果想要同时使用两个帐号发送javamail,比如使用1@a.com发送1#邮件,使用2@a.com发送2#邮件,这时候,你就需要同时创建两个java.mail.Session对象.但是如果你仍然使用 ...

  4. .net加密

    Microsoft .NET 中的简化加密 http://www.51cto.com/specbook/15/3407.htm 1.SHA1 using System.Security.Cryptog ...

  5. Kafaka详细介绍机制原理

    1.       kafka介绍 1.1.       主要功能 根据官网的介绍,ApacheKafka®是一个分布式流媒体平台,它主要有3种功能: 1:It lets you publish and ...

  6. 一个list<Map>里map其中的一个字段的值相同,如何判断这个字段相同,就把这个map的其他字段存入另一个map中

    //不建议使用Map保存这些,使用实体bean更好 package com.rxlamo.zhidao;   import java.util.*;   public class Main {     ...

  7. Js 中那些 隐式转换

    曾经看到过这样一个代码:  (!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]*~+[]]] = sb , 你敢相信, ...

  8. SQL连接查询基础知识点

    什么是连接 连接(join)查询是基于多个表中的关联字段将数据行拼接到一起,可以同时返回多个表中的数据. 下面以两个表为例子,举例说明一下不同的连接. SELECT * FROM products i ...

  9. Yarn 安装 node-sass 依赖导致 Build Fresh Packages 太慢的问题

    解决办法: 1. 在 项目目录下新建 .yarnrc 文件 添加以下代码 registry "https://registry.npm.taobao.org" sass_binar ...

  10. Maven的概述和基础（学习整理）

    1. Maven是啥 Maven是一个项目管理工具,包含了一个项目对象模型(POM),一组标准集合,一个项目生命周期(Lifecycle),一个依赖管理系统,和用来运行定义在生命周期阶段中的插件目标的 ...