目录
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=" 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="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="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="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>