2.6.5 优化头像上传功能

目录

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 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 %}

 

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"> 
    <!-- <input type="file" id="file" style=" width: 200px">-->
    <div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
      <label for="upload-file">select file</label>
      </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 src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
        $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
        }
        
    $(".imageBox").on("mouseup",function(){
         getImg();
          });
        
        
    $('#btnZoomIn').on('click', function(){
        cropper.zoomIn();
    })
    $('#btnZoomOut').on('click', function(){
        cropper.zoomOut();
    })
});
</script>