- <!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>
来源: http://www.bubuko.com/infodetail-3098834.html