一. 本地图片上传预览

1. 上传文件框隐藏到图片上面，点击图片相当于点上传文件框

<div class="login">

    <div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">

        <img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">

        <input  style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">

        {{ obj.avatar }}

    </div>

</div>

2. Ajax 上传并预览

#获取到头像，通过原生Ajax传到后端，后端返回一个路径，重新给image 的src赋值路径
#问题: 用户上传完头像，但没有注册,会在硬盘里出现多余的头像

#        有些网站是先上传到临时目录,注册完再移动到新的目录
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />

    <style>

        .login{

            width: 600px;

            margin:  auto;

            padding: 20px;

            margin-top: 80px;

        }

        .f1{

            position: absolute;height:80px;width: 80px;top:;left: ;opacity: ;

        }

    </style>

</head>

<body>

    <div class="login">

        <div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">

            <img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">

            <input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">

            {{ obj.avatar }}

        </div>

    </div>

    <script src="/static/jquery-3.2.1.js"></script>

    <script>

        $(function () {

            bindAvartar1();

        });

        function bindAvartar1() {

            $("#imgSelect").change(function () {

                //$(this)[0]           #jquery变成DOM对象

                //$(this)[0].files     #获取上传当前文件的上传对象

                //$(this)[0].files[0]  #获取上传当前文件的上传对象的某个对象

                var obj = $(this)[].files[];

                console.log(obj);

                //ajax 发送后台获取头像路径

                //img src 重新定义新的路径

                var formdata = new FormData();  //创建一个对象

                formdata.append("file",obj);

                var xhr = new XMLHttpRequest();

                xhr.open("POST","/register/");

                xhr.send(formdata);

                xhr.onreadystatechange = function () {

                    if(xhr.readyState ==){

                        var file_path = xhr.responseText;

                        console.log(file_path);

                        $("#previewImg").attr("src","/" + file_path)

                    }

                };

            })

        }

    </script>

</body>

</html>

register.html

import os

def register(request):

    if request.method == "GET":

        return render(request,"register.html")

    else:

        print(request.POST)

        print(request.FILES)

        file_obj = request.FILES.get("file")

        print(file_obj)

        file_path = os.path.join("static", file_obj.name)

        with open(file_path, "wb") as f:

            for chunk in file_obj.chunks():

                f.write(chunk)

        return HttpResponse(file_path)

views.py

3. 本地上传并预览两种方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />

    <style>

        .login{

            width: 600px;

            margin: 0 auto;

            padding: 20px;

            margin-top: 80px;

        }

        .f1{

            position: absolute;height:80px;width: 80px;top:0;left: 0;opacity: 0;

        }

    </style>

</head>

<body>

    <div class="login">

        <div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">

            <img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">

            <input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">

            {{ obj.avatar }}

        </div>

    </div>

    <script src="/static/jquery-3.2.1.js"></script>

    <script>

        $(function () {

            bindAvartar2();

        });

        function bindAvartar2() {

            $("#imgSelect").change(function () {

                var obj = $(this)[0].files[0];

                console.log(obj);

                //将文件对象上传到浏览器

                //IE10 以下不支持

                var v = window.URL.createObjectURL(obj);

                $("#previewImg").attr("src",v);

                //不会自动释放内存

                //当加载完图片后,释放内存

                document.getElementById("previewImg").onload= function () {

                    window.URL.revokeObjectURL(v);

                };

            })

        }

        function bindAvartar3() {

            $("#imgSelect").change(function () {

                var obj = $(this)[0].files[0];

                console.log(obj);

                var reader = new FileReader();

                reader.onload = function (e) {

                    $("#previewImg").attr("src",this.result);

                };

                reader.readAsDataURL(obj)

            })

        }

    </script>

</body>

</html>

4.以后用法

#先用本地预览，如果不支持，使用第三种方法
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />

    <style>

        .login{

            width: 600px;

            margin: 0 auto;

            padding: 20px;

            margin-top: 80px;

        }

        .f1{

            position: absolute;height:80px;width: 80px;top:0;left: 0;opacity: 0;

        }

    </style>

</head>

<body>

    <div class="login">

        <div style="position: relative;height:80px;width: 80px; left:260px;top: -10px ">

            <img id="previewImg" style="height:80px;width: 80px;" src="/static/image/default.png">

            <input id="imgSelect" style="height: 80px;width: 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">

        </div>

    </div>

    <script src="/static/jquery-3.2.1.js"></script>

    <script>

        $(function(){

           bindAvatar();

        });

        function bindAvatar(){

            if(window.URL.createObjectURL){

                bindAvatar2();

            }else if(window.FileReader){

                bindAvatar3()

            }else{

                bindAvatar1();

            }

        }

        function bindAvatar1() {

            $("#imgSelect").change(function () {

                //$(this)[0]           #jquery变成DOM对象

                //$(this)[0].files     #获取上传当前文件的上传对象

                //$(this)[0].files[0]  #获取上传当前文件的上传对象的某个对象

                var obj = $(this)[0].files[0];

                console.log(obj);

                //ajax 发送后台获取头像路径

                //img src 重新定义新的路径

                var formdata = new FormData();  //创建一个对象

                formdata.append("file",obj);

                var xhr = new XMLHttpRequest();

                xhr.open("POST","/register/");

                xhr.send(formdata);

                xhr.onreadystatechange = function () {

                    if(xhr.readyState ==4){

                        var file_path = xhr.responseText;

{#                        console.log(file_path);#}

                        $("#previewImg").attr("src","/" + file_path)

                    }

                };

            })

        }

        function bindAvatar2() {

            $("#imgSelect").change(function () {

                var obj = $(this)[0].files[0];

                console.log(obj);

                //将文件对象上传到浏览器

                //IE10 以下不支持

                //不会自动释放内存

                //当加载完图片后,释放内存

                document.getElementById("previewImg").onload= function () {

                    window.URL.revokeObjectURL(v);

                };

                var v = window.URL.createObjectURL(obj);

                $("#previewImg").attr("src",v);

            })

        }

        function bindAvatar3() {

            $("#imgSelect").change(function () {

                var obj = $(this)[0].files[0];

                console.log(obj);

                var reader = new FileReader();

                reader.onload = function (e) {

                    $("#previewImg").attr("src",this.result);

                };

                reader.readAsDataURL(obj)

            })

        }

    </script>

</body>

</html>

　　

Django 注册的更多相关文章

  1. python Django注册页面显示头像

    python Django注册页面显示头像(views) def register(request): ''' 注册 :param request: :return: ''' if request.m ...

  2. Django注册页面配置设计

    一.上次回顾 Django数据的增查改删 models 中有userInfo 三个字段 user password phonenumber,models.userInfo.objects.all(). ...

  3. django 注册、登录及第三方接口程序(4)：扩展邮箱注册，登录，微博登录

    1.邮箱注册 这里需要扩展User,两种解决办法,1,注册时将email字段内容赋给username,这种瞒天过海型的,另一种就是扩展user,这里介绍django1.5的扩展方法. 1.settin ...

  4. [py][mx]django注册-邮件激活

    人生,学习,就是一段旅途, 说是放弃,其实是自信心作祟. 因为不同时间段状态,譬如晚上和早上刚来状态不一样.做相同事情容器失去自信而放弃. 坚持可以打破这个魔咒 还有就是有些问题得分割, 不要让压死牛 ...

  5. 7月2日 Django注册页面的form组件

    forms.py里注册页面的form组件 # Create your views here. class RegForm(forms.Form): username = forms.CharField ...

  6. django(注册→登录→主页）增强版

    首先准备一张空白的数据表: urls展示: views主要的几个函数以及数据库链接代码:↓ 后端编写结束↑        ↓前端 前端界面:↓ 幸好成功了,接下来看看数据库有没有插入数据.... 这么 ...

  7. django注册在使用hashlib对密码加密时报Unicode-objects must be encoded before hashing

    在使用sh1等hashlib方法进行加密时报:Unicode-objects must be encoded before hashing 解决办法:对要加密的字符串指定编码格式 解决之前: s1=s ...

  8. django 注册后台管理 在debug=true能行，在debug=false不能显示出管理标签

    debug=true 下,如下图:

  9. 基于 Django2 实现邮箱注册登录功能

    1. 开发环境 Python 3.6.5 Django 2.2 2. 项目功能 用户登录 邮箱注册 图形验证码 找回密码 修改密码 用户退出 3. 项目创建 首先创建项目: django-admin ...

随机推荐

  1. 【CF600E】Lomsat gelral（dsu on tree）

    [CF600E]Lomsat gelral(dsu on tree) 题面 洛谷 CF题面自己去找找吧. 题解 \(dsu\ on\ tree\)板子题 其实就是做子树询问的一个较快的方法. 对于子树 ...

  2. 【BZOJ1493】【NOI2007】项链工厂（线段树）

    [BZOJ1493]项链工厂(线段树) 题面 BZOJ 洛谷 Description T公司是一家专门生产彩色珠子项链的公司,其生产的项链设计新颖.款式多样.价格适中,广受青年人的喜爱. 最近T公司打 ...

  3. bzoj4144【AMPPZ2014】Petrol

    题解:  首先注意到起点和终点都是加油站;          假设中途经过某个非加油站的点u,u连到v,离u最近的加油站是x,那么从u到x加油后回到u,再到v一定不比直接从u到v差:        因 ...

  4. python学习笔记(五) 200行实现2048小游戏

    用前文提到的基础知识,和网上流行的2048源码,用python实现该游戏. 先将用户操作和游戏逻辑绑定. WASD分别对应移动方向上.左.下.右 然后实现矩阵的转置和逆置,这样只要实现一个方向的移动, ...

  5. C语言 ------ #undef 的使用

    #undef 是在后面取消以前定义的宏定义 该指令的形式为 #undef 标识符 其中,标识符是一个宏名称.如果标识符当前没有被定义成一个宏名称,那么就会忽略该指令. 一旦定义预处理器标识符,它将保持 ...

  6. 给阿里云ECS主机添加IPV6地址

    阿里云公开的CentOS镜像将IPv6支持给去掉了,需要加载相关模块.通过HE的tunnelbroker开启IPv6隧道使国内VPS支持IPv6地址.   1. vim /etc/modprobe.d ...

  7. rename table table1 to table2;

    1. MYSQL rename table table1 to table2;

  8. [DeeplearningAI笔记]卷积神经网络2.2经典网络

    4.2深度卷积网络 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 [LeNet]--Lécun Y, Bottou L, Bengio Y, et al. Gradient-bas ...

  9. HDU 5213 分块 容斥

    给出n个数,给出m个询问,询问 区间[l,r] [u,v],在两个区间内分别取一个数,两个的和为k的对数数量. $k<=2*N$,$n <= 30000$ 发现可以容斥简化一个询问.一个询 ...

  10. 关于拉格朗日乘子法与KKT条件

    关于拉格朗日乘子法与KKT条件 关于拉格朗日乘子法与KKT条件   目录 拉格朗日乘子法的数学基础 共轭函数 拉格朗日函数 拉格朗日对偶函数 目标函数最优值的下界 拉格朗日对偶函数与共轭函数的联系 拉 ...