2.6.5 优化头像上传功能

Posted 2020-12-21 yaoyuanchun

目录

1.复制js文件

cp  ~/DjangoPracticeProject/layer-v3.0.1/layer/layer.js  static/js/

cp -a  ~/DjangoPracticeProject/layer-v3.0.1/layer/skin static/js/ 

 

2.编辑 templates/account/myself.html

导入js文件，增加弹窗功能

{% extends "base.html" %}
{% load staticfiles%}
{% block title %}myinforation{% endblock %}
{% block content %}
<script>
    function upload_image_layer(){
        layer.open({
            title:"上传头像",
            area:[‘900px‘ , ‘600px‘],
            type:2,
            content:"{% url ‘account:my_image‘ %}",
    
        });
    }
</script>
<div class ="row text-center vertical-middle-sm">
<h1>My Information</h1>
<div class ="row">

<div class="col-md-6">

    <div class="row">
        <div class ="col-md-4 text-right"><span>username:</span></div>
        <div class="col-md-8 text-left">{{ user.username}}</div>
    </div>

    <div class ="row">
        <div class="col-md-4 text-right"><span>email:</span></div>
        <div class="col-md-8 text-left">{{ user.email}}</div>
    </div>

    <div class ="row">
        <div class="col-md-4 text-right"><span>birth:</span></div>
        <div class ="col-md-8 text-left">{{ userprofile.birth}}</div>
    </div>

    <div class ="row">
        <div class="col-md-4 text-right"><span>phone:</span></div>
        <div class="col-md-8 text-left">{{ userprofile.phone}}</div>
    </div>

    <div class="row">
        <div class="col-md-4 text-right"><span>school:</span></div>
        <div class="col-md-8 text-left">{{userinfo.school}}</div>
    </div>

    <div class ="row">
        <div class ="col-md-4 text-right"><span>company:</span></div>
        <div class="col-md-8 text-left">{{userinfo.company}}</div>
    </div>

    <div class ="row">
        <div class ="col-md-4 text-right"><span>profession:</span></div>
        <div class ="col-md-8 text-left">{{userinfo.profession}}</div>
    </div>

    <div class ="row">
        <div class="col-md-4 text-right"><span>address:</span></div>
        <div class ="col-md-8 text-left">{{ userinfo.address}}</div>
    </div>

    <div class ="row">
        <div class ="col-md-4 text-right"><span>about:</span></div>
        <div class ="col-md-8 text-left">{{ userinfo.aboutme}}</div>
    </div>
<a href="{% url ‘account:edit_my_information‘ %}"><button class="btn btn-primary btn-lg">edit my information</button></a>
</div>

    <div class ="col-md-6">
        <div style="margin-right:100px">
            {% if userinfo.photo %}
                <img src="{{userinfo.photo | striptags }}" class="img-circle" id="my_photo" name="user_face">
            {% else %}
                <img name ="user_face" src="{% static ‘images/pig.jpg‘ %}" class="img-circle" width="270px" id="my_photo">
            {% endif %}
        </div>
        <div style="margin-right: 100px"><button class="btn btn-primary btn-lg" id="upload_image" onclick="upload_image_layer()">upload my photo</button></div>
    </div>
</div>
</div>
<script type="text/javascript" src=‘{% static "js/jquery-3.4.1.min.js" %}‘></script>
<script type="text/javascript" src=‘{% static "js/layer.js" %}‘></script>
{% endblock %}

View Code