zoukankan      html  css  js  c++  java
  • 上传头像(三种方式)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" />
        <style>
            .login{
                 600px;
                margin: 0 auto;
                padding: 20px;
                margin-top: 80px;
            }
    
        </style>
    </head>
    <body>
        <div class="login">
            <h3>用户注册</h3>
    
            
            <div style="position: relative;height:80px; 80px;">
                <img id="previewImg" style="height:80px; 80px;" src="/static/imgs/default.png">
                <input id="imgSelect" style="position: absolute;height:80px; 80px;top:0;left: 0;opacity: 0;" type="file" />
            </div>
            
    
            <form class="form-horizontal">
                  <div class="form-group">
                    <label  class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control"  placeholder="用户名" name="user">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control"  placeholder="密码" name="pwd">
                    </div>
                  </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control"  placeholder="确认密码" name="pwd2">
                    </div>
                  </div>
                    <div class="form-group">
                    <label class="col-sm-2 control-label">验证码</label>
                    <div class="col-sm-5">
                      <input type="text" class="form-control"  placeholder="密码" name="code">
                    </div>
                    <div class="col-sm-5">
                      <img style=" 120px;height: 30px;" src="/check_code/">
                    </div>
                  </div>
    
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <input type="submit" class="btn btn-default" value="注册" />
                    </div>
                  </div>
                </form>
        </div>
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            $(function(){
               bindAvatar();
            });
    
            function bindAvatar(){
                if(window.URL.createObjectURL){
                    bindAvatar2();
                }else if(window.FileReader){
                    bindAvatar3()
                }else{
                    bindAvatar1();
                }
            }
    
        // 上传头像到服务器并预览
        function bindAvatar1() {
            $("#img2").change(function () {
                // 获取随机字符串
                var token = $.cookie("csrftoken");
                // 获取文件对象
                var obj = $(this)[0].files[0];
                var form = new FormData();
                form.append("fafafa",obj);
                $.ajax({
                    url:"/upload/",
                    type:"post",
                    data:form,
                    headers:{"X-CSRFToken":token},
                    contentType:false,
                    processData:false,
                    success:function (data) {
                        $("#img1").prop("src","/"+data)
                    }
                })
            })
        }
    
    
            /*
            本地上传预览
             */
            function bindAvatar2(){
                $('#img2').change(function(){
                    var obj = $(this)[0].files[0];
                    var v = window.URL.createObjectURL(obj);
                    $('#img1').attr('src',v);
                    $('#img1').load(function(){
                        window.URL.revokeObjectURL(v);
                    });
    
                })
            }
    
            function bindAvatar3(){
                $('#img2').change(function(){
                    var obj = $(this)[0].files[0];
                    var reader = new FileReader();
                    reader.onload = function(e){
                        $('#img1').attr('src',this.result);
                    };
                    reader.readAsDataURL(obj);
                })
            }
    
        </script>
    </body>
    </html>
    
  • 相关阅读:
    使用pwn_deploy_chroot部署国赛pwn比赛题目
    《Java程序设计》第十一章 JDBC与MySQL数据库
    使用commons.cli实现MyCP
    2018-2019-2 20175211 实验二《Java面向对象程序设计》实验报告
    结对编程练习_四则运算(第二周)
    20175211 2018-2019-2 《Java程序设计》第六周学习总结
    20175211 2017-2018-2 《Java程序设计》第六周学习记录(2)
    海思Hi35xx平台调试笔记
    ffmpeg,rtmpdump和nginx rtmp实现录屏,直播和录制
    文件传输(xmodem协议)
  • 原文地址:https://www.cnblogs.com/zouruncheng/p/7161524.html
Copyright © 2011-2022 走看看