template design by http://www.20shx.com/
时间:2014-06-11 发布人:SHX 浏览次数:6727 评论:0
经常看见一些大型网站,在用户中心都有一个头像上传剪裁功能。于是就在网上找了找,发现这东西应用起来还是相当简单的,这里就和大家分享下:
源码包里有ASP,ASP.NET,JSP,PHP几个版本,这里简单介绍下PHP(因为我也只会PHP的
)
dome.html是主要的例子,index.html是官方信息基本不用看了。
upfile.php是PHP配置文件,可以定义文件上传路径。
dome.html
<script type="text/javascript">
function uploadevent(status,picUrl,callbackdata){
//alert(picUrl); //后端存储图片
//alert(callbackdata); //后端返回数据
status += '';
switch(status){
case '1':
var time = new Date().getTime();
var filename162 = picUrl+'_162.jpg';
var filename48 = picUrl+'_48.jpg';
var filename20 = picUrl+"_20.jpg";
document.getElementById('avatar_priview').innerHTML =
"头像1 : <img src='"+filename162+"?" + time + "'/> <br/>
头像2: <img src='"+filename48+"?" + time + "'/><br/>
头像3: <img src='"+filename20+"?" + time + "'/>" ;
break;
case '-1':
window.location.reload();
break;
default:
window.location.reload();
}
}
</script><div id="altContent"> .... </div> <div id="avatar_priview"></div>
upfile.php
<?php
/********** 仅测试程序 **********/
$savePath = './'; //图片存储路径
$savePicName = time(); //图片存储名称
$file_src = $savePath.$savePicName."_src.jpg";
$filename162 = $savePath.$savePicName."_162.jpg";
$filename48 = $savePath.$savePicName."_48.jpg";
$filename20 = $savePath.$savePicName."_20.jpg";
$src=base64_decode($_POST['pic']);
$pic1=base64_decode($_POST['pic1']);
$pic2=base64_decode($_POST['pic2']);
$pic3=base64_decode($_POST['pic3']);
if($src) {
file_put_contents($file_src,$src);
}
file_put_contents($filename162,$pic1);
file_put_contents($filename48,$pic2);
file_put_contents($filename20,$pic3);
$rs['status'] = 1;
$rs['picUrl'] = $savePath.$savePicName;
print json_encode($rs);
?>源码包:
flash上传头像剪裁预览组件2.1 php jsp asp.net asp.rar
上一篇:CSS3制作发光搜索表单下一篇:世界杯!不敢冒险才是风险