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>
    
  • 相关阅读:
    MySQL优化—工欲善其事,必先利其器(2)
    MySQL优化—工欲善其事,必先利其器之EXPLAIN
    Linux工具安装和常用配置
    .Net Core配置文件介绍
    Centos7上开发.Net Core项目
    VMWare的host-only/bridged/NAT连接图文介绍
    Quartz.net 3.x使用总结(二)——Db持久化和集群
    Vuex实现状态管理
    Quartz.net 3.x使用总结(一)——简单使用
    C#获取根目录的方法总结
  • 原文地址:https://www.cnblogs.com/zouruncheng/p/7161524.html
Copyright © 2011-2022 走看看