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文件，增加upload_image_layer 弹窗功能

{% 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 Informationh1>
<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 informationbutton>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 photobutton>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 %}

3.修改 templates/account/imagecrop.html

增加弹出窗口关闭功能  parent.location.reload()

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecrop.css' %}" type="text/css" />

<div class="container">
  <div class="imageBox">
    <div class="thumbBox">div>
    <div class="spinner" style="display: none">div>
  div>
  <div class="action"> 
    
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">select filelabel>
      a>
      <input type="file" class="" name="upload-file" id="upload-file" />
    div>
    <input type="button"   id="btnCrop" class="Btnsty_peyton" value="OK">
    <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+"  >
    <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
  div>
  <div class="cropped">div>
div>
<script type="text/javascript" src="{% static 'js/jquery-1.11.1.min.js' %}">script> 
<script type="text/javascript" src="{% static 'js/cropbox-min.js' %}">script>
<script type="text/javascript">
 
$(window).load(function() {
    //$('#btnCrop').click();$("#idName").css("cssText","background-color:red!important");
    
    //$(".imageBox").css("cssText","background-position:88px 88px!important");$(".imageBox").css("cssText","background-size:222px 222px!important");
    var options =
    {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: ''
    }
    var cropper = $('.imageBox').cropbox(options);
    var img="";
    $('#upload-file').on('change', function(){
        var reader = new FileReader();
        reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
            getImg();
        }
        reader.readAsDataURL(this.files[0])
        console.log(this.files[0]);
        //this.files = [];
        this.files[0] = {};
        //getImg();
    })
    $('#btnCrop').on('click', function(){
        alert("upload file");
        $.ajax({
            url: '{% url "account:my_image" %}',
            type: 'POST',
            data: {"img":img,"csrfmiddlewaretoken":'{{ csrf_token }}'},
            success: function(e){
                location.href="{% url 'account:my_information' %}"
                if(e == "1"){
                    parent.location.reload();
                }else{
                    alert("upload failed!!!");
                }
            }
        });
    })
    function getImg(){
        img = cropper.getDataURL();
        $('.cropped').html('');
        $('.cropped').append(''+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;">
180px*180px');
        $('.cropped').append(''+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;">
128px*128px');
        $('.cropped').append(''+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" >
64px*64px');
        }
        
    $(".imageBox").on("mouseup",function(){
         getImg();
          });
        
        
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});
script>