django頭像上傳預覽功能

時間 2021-01-30

標籤 css html jquery ajax django bootstrap 瀏覽器 app ide post 欄目 Python 简体版

原文原文鏈接

頁面格式

註冊頁面

這裏能夠看到有頭像按鈕，css

頭像需求

有默認的頭像
點擊頭像就能夠上傳圖片
上傳圖片後能夠預覽

生成默認的頭像

上傳默認圖片到指定文件夾，而後把img標籤的src指定到這裏就能夠，
html

點擊頭像上傳圖片

默認添加了<input type="file">後會在圖片下面顯示上傳文件夾的選項，這個和咱們當初想的不同，咱們能夠經過把input標籤和img標籤重疊到一塊兒，而後讓input標籤隱藏起來，這樣出來的效果就是點擊圖片就能夠點到input文件這個屬性了jquery

<div style="width: 80px;height: 80px;position: relative;">
            <img id="previewIMG" src="/static/imgs/default.png" alt="頭像" style="width: 80px;height: 80px;">
            <input type="file" id="Imgfile" class="f1">
        </div>

f1 屬性爲： .f1{
position: absolute;width: 80px;height: 80px;top: 0;left: 0;opacity: 0
}ajax

鼠標放到圖像上面會顯示讓上傳文件
django

上傳圖像後預覽

實現這個功能能夠有三種方式：bootstrap

直接把文件存到後臺硬盤上，而後在從硬盤上讀取出來，使用到的是ajax，formData，能夠參考博客https://blog.51cto.com/sgk2011/2085605
下2種方式經過瀏覽器的方式，這個對瀏覽器有要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .login {
            margin: 0 auto;
            margin-top: 80px;
            width: 600px;
        }

        .btn_color {
            background-color: ghostwhite;
        }
        .f1{
            position: absolute;width: 80px;height: 80px;top: 0;left: 0;opacity: 0
        }
    </style>
</head>
<body>
<div class="login">

    <form class="form-horizontal" method="post" action="/register/" enctype="multipart/form-data">
        <div style="width: 80px;height: 80px;position: relative;">
            <img id="previewIMG" src="/static/imgs/default.png" alt="頭像" style="width: 80px;height: 80px;">
            <input type="file" id="Imgfile" class="f1">
        </div>
        <br>
        <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">#}
                {{ obj.username }}
            </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="pwd1">#}
                {{ obj.password1 }}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">確認密碼</label>
            <div class="col-sm-10">
                {#      <i?nput type="password" class="form-control"  placeholder="確認密碼" name="pwd2">#}
                {{ obj.password2 }}
            </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="width: 120px;height: 30px;" src="/check_code/">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> Remember me
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input type="submit" class="btn btn-default btn_color" value="登錄">
            </div>
        </div>
    </form>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    $(function () {
        bindAvatar3();
    });
    /*
    function bindAvatar1() {
        $('#Imgfile').change(function () {
            var csrf = $("input[name='csrfmiddlewaretoken']").val();
            var formData = new FormData();
            formData.append("csrfmiddlewaretoken",csrf)
            formData.append('Imgfile',$(this)[0].files[0])
            console.log(formData)
            $.ajax({
                url:'/avatar_upload/',
                type:'POST',
                contentType:false,
                processData:false,
                success:function (args) {
                    console.log(args)
                }
            })
        })
    }
    */
    function bindAvatar2() {
        $('#Imgfile').change(function () {
            var obj = $(this)[0].files[0];
            var v = window.URL.createObjectURL(obj)//傳obj這個文件對象，至關於把這個文件上傳到了瀏覽器，這個時候就能夠預覽了
            $('#previewIMG').attr('src',v)//找到img標籤，把src修改後就能夠訪問了，可是對於瀏覽器有兼容性
{#             window.URL.revokeObjectURL(v);//手動清除內存中，要想手動，須要加載完畢再去釋放#}
            $('#previewIMG').load(function () {
                window.URL.revokeObjectURL(v);
            })
        })
    }

    function bindAvatar3() {
        $('#Imgfile').change(function () {
            var obj = $(this)[0].files[0];
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#previewIMG').attr('src',this.result)
            }
            reader.readAsDataURL(obj);
        })
    }
</script>
</body>
</html>

若是想要兼容的話，就對上面的方法作一個判斷瀏覽器

function bindAvatar(){
            if(window.URL.createObjectURL){
                bindAvatar2();
            }else if(window.FileReader){
                bindAvatar3()
            }else{
                bindAvatar1();
            }
        }