Django優化影象上傳功能
阿新 • • 發佈:2018-12-30
一 引入提示框
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後的效果