一 引入提示框
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后的效果