一 引入提示框

1 下載路徑

https://github.com/cakin24/DjangoPracticeProject/tree/master/layer-v3.0.1/layer

2 部署方式

將layer.js和skin目錄複製到專案的mysite/static/js目錄下

二 程式碼

1 重構mysite/templates/account/myself.html

{% extends "base.html" %}

{% block title %}我的資訊{% endblock %}

{% block content %}
<div class="row text-center vertical-middle-sm">
    <h1>我的資訊</h1>
    <div class="row">
        <div class="col-md-6" >
            <div class="row">
                <div class="col-md-4 text-right"><span>使用者名稱:</span></div>
                <div class="col-md-8 text-left">{{user.username}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>郵箱:</span></div>
                <div class="col-md-8 text-left">{{user.email}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>生日:</span></div>
                <div class="col-md-8 text-left">{{userprofile.birth}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>電話:</span></div>
                <div class="col-md-8 text-left">{{userprofile.phone}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>畢業學校:</span></div>
                <div class="col-md-8 text-left">{{userinfo.school}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>工作單位:</span></div>
                <div class="col-md-8 text-left">{{userinfo.company}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>職業:</span></div>
                <div class="col-md-8 text-left">{{userinfo.profession}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>地址:</span></div>
                <div class="col-md-8 text-left">{{userinfo.address}}</div>
            </div>
            <div class="row">
                <div class="col-md-4 text-right"><span>個人介紹:</span></div>
                <div class="col-md-8 text-left">{{userinfo.aboutme}}</div>
            </div>
            <div class="row">
                <a href="{% url 'account:edit_my_information' %}">
                    <button class="btn btn-primary btn-lg">編輯我的資訊</button>
                </a>
            </div>
        </div>
        <div class="col-md-6">
            {% load staticfiles %}
            <div style="margin-right:100px">
                {% if userinfo.photo %}
                <!--將從資料庫取出的資料進行過濾，去掉HTML標籤-->
                <img src="{{ userinfo.photo | striptags }}" class="img-circle" id="my_photo" name="user_face">
                {% else %}
                <img name="user_face" src="{% static 'images/newton.jpg' %}" class="img-circle" id="my_photo">
                {% endif %}

                <div style="margin-right:100px">
                    <button class="btn btn-primary btn-lg" id="upload_image" onclick="upload_image_layer()">上傳我的圖片
                    </button>
                </div>
            </div>

    </div>

</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<!--這裡引入和使用提示框-->
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script>
function upload_image_layer(){
    layer.open({
        //content:"<p>hello world</p>",
        title:"上傳頭像",
        area: ['650px', '600px'],
        type:2,
        content:"{% url 'account:my_image' %}",
    });
}
</script>
{% endblock %}
 

2 編寫mysite/templates/account/imagecrop.html

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/imagecrop.css' %}">
<div class="container" style="margin-left:10px">
  <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">請先選擇圖片...</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 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" src="{% static 'js/csrf.js' %}"></script>
<script type="text/javascript">
$(window).load(function() {
    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]);
        this.files = [];
        //getImg();
    })
    $('#btnCrop').on('click', function(){
        //alert("圖片上傳嘍");
            $.ajax({
            //宣告提交地址
            url: '{% url "account:my_image" %}',
        type: 'POST',   //宣告提交方式
        data: {"img": img},   //宣告提交資料內容
        success: function(e){
            //location.href= "{% url 'account:my_information' %}" //提交成功後，根據反饋結果實現頁面跳轉
            if(e == "1"){
            parent.location.reload();
            } else {
            alert("對不起，圖片不能上傳.");
            }
        },
        });
        })
    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>
 

三 測試

1 先使用小明登入

2 然後瀏覽器輸入http://localhost:8000/account/my-information/

3 點選上傳我的圖片，然後選擇一張圖片進行裁剪

4 點選OK後的效果