JS之ajax实现注册页,小文件传输
2024-09-05 05:53:38
<!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>
最新文章
- vue.js在windows本地下搭建环境和创建项目
- InnoDB锁机制分析
- HDU 4358 Boring counting(莫队+DFS序+离散化)
- MyBatis——调用存储过程
- 200. Number of Islands
- proxy 利用get拦截,实现一个生成各种DOM节点的通用函数dom。
- HDU 5479 Scaena Felix
- 多线程之Thread
- python3 Flask -day4 自定义url转换器
- 【webpack系列】从零搭建 webpack4+react 脚手架(三)
- SpringBoot系列: Pebble模板引擎语法介绍
- redis发布订阅、事务、脚本
- Python学习——多线程,异步IO,生成器,协程
- ELK+MySQL出现大量重复记录问题处理
- 第八届蓝桥杯国赛java B组第三题
- Aspects源码解析(转载)
- 浅谈白鹭Egret
- HDU 4126 Genghis Khan the Conqueror 最小生成树+树形dp
- Navicat无法启动,提示无法启动程序,因为计算机中丢失MSVCP140.dll
- Javascript设计模式理论与实战:单例模式
热门文章
- [Functional Programming] liftA2 and converge
- 爬取淘宝商品数据并保存在excel中
- P4118 [Ynoi2016]炸脖龙I
- 005_linux驱动之_class_device_create函数
- MySQL 一次非常有意思的SQL优化经历:从30248.271s到0.001s
- umeditor实现ctrl+v粘贴word图片并上传
- 数据分析之numpy使用
- 十一、FHS基础原理
- opensuse tumbleweed中安装code
- ReactJS和AngularJS对比