<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
{yun:}include file="$lietoustyle/public.htm"{/yun}
|
|
<head>
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<link rel="stylesheet" href="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/imgareaselect.css?v={yun:}$config.cachecode{/yun}" type="text/css" />
|
<script type="text/javascript" src="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/jquery.imgareaselect.js?v={yun:}$config.cachecode{/yun}"></script>
|
<script type="text/javascript" src="{yun:}$config.sy_weburl{/yun}/js/imgareaselect/ajaxfileupload.js?v={yun:}$config.cachecode{/yun}"></script>
|
</head>
|
|
<body>
|
|
<!--header头部-->
|
{yun:}include file="$lietoustyle/header.htm"{/yun}
|
|
<!--内容部分content-->
|
<div class="m_content">
|
<div class="wrap">
|
{yun:}include file="$lietoustyle/left.htm"{/yun}
|
<div class="m_inner_youb fl">
|
<div class="lt_m_tit">
|
<span class="lt_m_tit_s">上传头像</span>
|
</div>
|
<div class="resume_box_list">
|
<div class="uppic_msg">提示：有时因页面缓存问题，上传后照片不能及时更新请击刷新页面即可</div>
|
|
<div class="uppic_left">
|
|
<div class="uppic_tip">方法一：选择本地照片，上传编辑自己的头像</div>
|
|
<div class="uppic_tip_bth">
|
<a class="uppic_tip_bthupload" href="javascript:;">选择照片</a>
|
<input id="image" class="uppic_tip_bthfile" type="file" name="image" onchange="ajaxfile();" />
|
</div>
|
|
<div class="uppic_tip_gs">支持，{yun:}$config.pic_type{/yun},文件格式，最大不要超过{yun:}$config.file_maxsize{/yun}M</div>
|
|
<div class="clear"></div>
|
|
<div class="uppic_tit">
|
头像预览
|
{yun:}if $row.photo_n{/yun}
|
{yun:}if $row.photo_status=='1'{/yun}
|
<font color="#f00">审核中</font>
|
{yun:}else if $row.photo_status=='2'{/yun}
|
<font color="#f00">未通过</font>
|
{yun:}else{/yun}
|
<font color="#f00">已审核</font>
|
{yun:}/if{/yun}
|
{yun:}/if{/yun}
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="oppic_img_big">
|
<div class="oppic_img_big_img" style="width: 120px;">
|
<img src="{yun:}$bpic{/yun}" width='120' height='120' />
|
</div>
|
<div class="oppic_img_big_p">标准头像120x120</div>
|
</div>
|
|
<div class="clear"></div>
|
|
<div class="uppic_flash" style="display: none;" id='uppic_flash'>
|
|
<div class="uppic_big_zx">
|
<img src="" style="float: left; margin-right: 10px;" id="thumbnail" />
|
</div>
|
|
<div style="width: 150px; float: left">
|
|
<div id="preview1" class="uppic_previ1">
|
<img id="preview1_img" src="" style="position: relative;" />
|
</div>
|
</div>
|
|
<div class="uppic_pb">
|
<form name="form1" id="form1">
|
<input name="sizeit" id="sizeit" type="submit" value="保存头像" class="uppic_pb_bth" />
|
</form>
|
</div>
|
</div>
|
</div>
|
|
<div class="uppic_right">
|
<div class="uppic_right_tit">方式二：手机拍照上传</div>
|
<div class="uppic_ewm">
|
<img src="{yun:}url m=upload c=qrcode type=5{/yun}" alt="手机扫码拍照上传" width="130" height="130" />
|
</div>
|
<div class="uppic_ewm_p">扫描二维码</div>
|
</div>
|
|
<div class="clear"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
function ajaxfile() {
|
if ($("#image").val() != '') {
|
layer.load('图片上传中，请稍候....', 0);
|
$.ajaxFileUpload({
|
url : 'index.php?c=uppic&act=ajaxfileupload', //用于文件上传的服务器端请求地址
|
secureuri : false, //是否需要安全协议，一般设置为false
|
fileElementId : 'image', //文件上传域的ID
|
dataType : 'json', //返回值类型 一般设置为json
|
success : function(data, status) { //服务器成功响应处理函数
|
layer.closeAll('loading');
|
if (data.s_thumb) {
|
layer.msg(data.s_thumb, 2, 8);
|
setTimeout(function() {
|
location.href = '';
|
}, 2000);
|
} else {
|
hideLoading(data.url);
|
}
|
}
|
})
|
}
|
}
|
|
var size1 = {
|
width : 120,
|
height : 120
|
}
|
|
$('#preview1').width(size1.width);
|
$('#preview1').height(size1.height);
|
|
function hideLoading(pic) {
|
|
$("#thumbnail").attr({'src' : pic});
|
$("#preview1_img").attr({'src' : pic});
|
|
$('#uppic_flash').show();
|
|
var ias = $('#thumbnail').imgAreaSelect({
|
aspectRatio : '1:1', //长宽1:1的比例，在等待剪裁的图像上呈现出正方形的选择框
|
onSelectChange : lis, //把用户当前的选择状态传给lis函数
|
onInit : function() {
|
var _opt = ias.getOptions();
|
render($('#preview1_img'), $("#thumbnail")[0], {
|
height : _opt.y2 - _opt.y1,
|
width : _opt.x2 - _opt.x1,
|
x1 : _opt.x1,
|
x2 : _opt.x2,
|
y1 : _opt.y1,
|
y2 : _opt.y2
|
}, size1);
|
},
|
instance : true,
|
keys : true,
|
x1 : 50, //选择框在图片里的初始位置，这里默认是图片左上角，宽度和高度都是200px，符合size1
|
y1 : 50,
|
x2 : size1.width,
|
y2 : size1.height
|
});
|
}
|
|
function lis(img, sel) {
|
render($('#preview1 img'), img, sel, size1);
|
|
}
|
function render(target, img, sel, size) {
|
var scale = size.width / sel.width;
|
target.css({
|
width : Math.round(scale * $(img).width()),
|
height : Math.round(scale * $(img).height())
|
});
|
target.css({
|
marginLeft : '-' + Math.round(scale * sel.x1) + 'px',
|
marginTop : '-' + Math.round(scale * sel.y1) + 'px'
|
});
|
target.data('scale', scale);
|
target.data('width', sel.width);
|
target.data('height', sel.height);
|
target.data('x', sel.x1);
|
target.data('y', sel.y1);
|
}
|
|
//ajax提交表单
|
$(function() {
|
$('#form1').submit(function(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
|
var preview1 = $('#preview1 img');
|
|
loadlayer();
|
$.post("index.php?c=uppic&act=savethumb", {
|
sizeit : true,
|
count : 1,
|
width : preview1.data('width'),
|
height : preview1.data('height'),
|
x : preview1.data('x'),
|
y : preview1.data('y'),
|
img1 : $('#preview1_img').attr('src'),
|
scale : preview1.data('scale'),
|
}, function(res) {
|
|
layer.closeAll('loading');
|
|
if (res) {
|
var res = eval('(' + res + ')');
|
layer.msg(res.msg, 2, res.st, function() {
|
location.reload();
|
});
|
}
|
});
|
});
|
});
|
</script>
|
|
<!--内容结束-->
|
{yun:}include file="$lietoustyle/footer.htm"{/yun}
|
