php+jsiframe实现上传头像界面无跳转
这篇文章主要介绍了php+js实现的上传头像界面无跳转，示例中用到了iframe,需要的朋友可以参考下
上传头像，界面无跳转的方式很多，我用的是加个iframe那种。下面直接上代码。
html:
复制代码代码如下:
//route为后端接口
//upload/avatar为上传的头像的保存地址
//imgurl=/upload/avatar/这里最后的是为了后面用js实现即时显示最新的更换后的头像用的，参照下面的js部分的代码
//头像保存名称为uid.type，如1.jpg,2.png等
//$user[''avatar'']用户如果上传过头像，该用户数据库中的avatar字段将赋予时间戳，否则为空
"style="width:100px;height:100px;"/>
php:
复制代码代码如下:
$token=param(''token'');
$user=user_from_token($token);
!$userANDexit("$lang[user_not_exists]");
//文件存储路径
$file_path="./upload/avatar/";
//664权限为文件属主和属组用户可读和写，其他用户只读。
if(is_dir($file_path)!=TRUE)mkdir($file_path,0664);
//定义允许上传的文件扩展名
$ext_arr=array("gif","jpg","jpeg","png","bmp");
if(empty($_FILES)===false){
//判断检查
$photo_up_size>2097152ANDexit("对不起，您上传的照片超过了2M");
$_FILES["file"]["error"]>0ANDexit("文件上传发生错误：".$_FILES["file"]["error"]."");
//获得文件扩展名
$temp_arr=explode(".",$_FILES["file"]["name"]);
$file_ext=array_pop($temp_arr);
$file_ext=trim($file_ext);
$file_ext=strtolower($file_ext);
//检查扩展名
if(in_array($file_ext,$ext_arr)===false){
exit("上传文件扩展名是不允许的扩展名");
}
//删除目录下相同前缀的文件
if($dh=opendir($file_path)){
while(($file=readdir($dh))!==false){
$file_arr=$file.split(''.'');
if($file_arr[0]==$user[''uid''])unlink($file_path.$file);
}
}
//以uid重命名文件
$new_name=$user[''uid''].".".$file_ext;
//将文件移动到存储目录下
move_uploaded_file($_FILES["file"]["tmp_name"],$file_path.$new_name);
//裁剪压缩图片
clip($file_path.$new_name,$file_path.$new_name,0,0,100,100);
clip_thumb($file_path.$new_name,$file_path.$new_name,100,100);
//向数据表写入文件存储信息以便管理
user_update($user[''uid''],array(''avatar''=>time()));
exit("文件上传成功");
}else{
exit("无正确的文件上传");
}
functionext($filename){
returnstrtolower(substr(strrchr($filename,''.''),1));
}
/
实例：
thumb(APP_PATH.''xxx.jpg'',APP_PATH.''xxx_thumb.jpg'',200,200);
返回：
array(''filesize''=>0,''width''=>0,''height''=>0)
/
functionthumb($sourcefile,$destfile,$forcedwidth=80,$forcedheight=80){
$return=array(''filesize''=>0,''width''=>0,''height''=>0);
$imgcomp=10;
$destext=ext($destfile);
if(!in_array($destext,array(''gif'',''jpg'',''bmp'',''png''))){
return$return;
}
$imgcomp=100-$imgcomp;
$imginfo=getimagesize($sourcefile);
$src_width=$imginfo[0];
$src_height=$imginfo[1];
if($src_width==0||$src_height==0){
return$return;
}
$src_scale=$src_width/$src_height;
$des_scale=$forcedwidth/$forcedheight;
if(!function_exists(''imagecreatefromjpeg'')){
copy($sourcefile,$destfile);
$return=array(''filesize''=>filesize($destfile),''width''=>$src_width,''height''=>$src_height);
return$return;
}
//按规定比例缩略
if($src_width<=$forcedwidth&&$src_height<=$forcedheight){
$des_width=$src_width;
$des_height=$src_height;
}elseif($src_scale>=$des_scale){
$des_width=($src_width>=$forcedwidth)?$forcedwidth:$src_width;
$des_height=$des_width/$src_scale;
$des_height=($des_height>=$forcedheight)?$forcedheight:$des_height;
}else{
$des_height=($src_height>=$forcedheight)?$forcedheight:$src_height;
$des_width=$des_height$src_scale;
$des_width=($des_width>=$forcedwidth)?$forcedwidth:$des_width;
}
switch($imginfo[''mime'']){
case''image/jpeg'':
$img_src=imagecreatefromjpeg($sourcefile);
!$img_src&&$img_src=imagecreatefromgif($sourcefile);
break;
case''image/gif'':
$img_src=imagecreatefromgif($sourcefile);
!$img_src&&$img_src=imagecreatefromjpeg($sourcefile);
break;
case''image/png'':
$img_src=imagecreatefrompng($sourcefile);
break;
case''image/wbmp'':
$img_src=imagecreatefromwbmp($sourcefile);
break;
default:
return$return;
}
$img_dst=imagecreatetruecolor($des_width,$des_height);
$img_color=imagecolorallocate($img_dst,255,255,255);
imagefill($img_dst,0,0,$img_color);
imagecopyresampled($img_dst,$img_src,0,0,0,0,$des_width,$des_height,$src_width,$src_height);
//$tmpfile=$temp_path.md5($destfile);
$tmpfile=$destfile;
switch($destext){
case''jpg'':imagejpeg($img_dst,$tmpfile,$imgcomp);break;
case''gif'':imagegif($img_dst,$tmpfile,$imgcomp);break;
case''png'':imagepng($img_dst,$tmpfile,version_compare(PHP_VERSION,''5.1.2'')==1?7:70);break;
}
$r=array(''filesize''=>filesize($tmpfile),''width''=>$des_width,''height''=>$des_height);;
copy($tmpfile,$destfile);
//unlink($tmpfile);
imagedestroy($img_dst);
return$r;
}
/
图片裁切
@paramstring$srcname原图片路径(绝对路径/.jpg)
@paramstring$forcedheight裁切后生成新名称(绝对路径/rename.jpg)
@paramint$sourcefile被裁切图片的X坐标
@paramint$destfile被裁切图片的Y坐标
@paramint$destext被裁区域的宽度
@paramint$imgcomp被裁区域的高度
clip(''xxx/x.jpg'',''xxx/newx.jpg'',10,40,150,150)
/
functionclip($sourcefile,$destfile,$clipx,$clipy,$clipwidth,$clipheight){
$getimgsize=getimagesize($sourcefile);
if(empty($getimgsize)){
return0;
}else{
$imgwidth=$getimgsize[0];
$imgheight=$getimgsize[1];
if($imgwidth==0||$imgheight==0){
return0;
}
}
if(!function_exists(''imagecreatewww.hunanwang.netfromjpeg'')){
copy($sourcefile,$destfile);
returnfilesize($destfile);
}
switch($getimgsize[2]){
case1:
$imgcolor=imagecreatefromgif($sourcefile);
break;
case2:
$imgcolor=imagecreatefromjpeg($sourcefile);
break;
case3:
$imgcolor=imagecreatefrompng($sourcefile);
break;
}
//$imgcolor=imagecreatefromjpeg($sourcefile);
$img_dst=imagecreatetruecolor($clipwidth,$clipheight);
$img_color=imagecolorawww.visa158.comllocate($img_dst,255,255,255);
imagefill($img_dst,0,0,$img_color);
imagecopyresampled($img_dst,$imgcolor,0,0,$clipx,$clipy,$imgwidth,$imgheight,$imgwidth,$imgheight);
$tmpfile=$destfile;
imagejpeg($img_dst,$tmpfile,100);
$n=filesize($tmpfile);
copy($tmpfile,$destfile);
return$n;
}
//先裁切后缩略，因为确定了，width,height,不需要返回宽高。
functionclip_thumb($sourcefile,$destfile,$forcedwidth=80,$forcedheight=80){
//获取原图片宽高
$getimgsize=getimagesize($sourcefile);
if(empty($getimgsize)){
return0;
}else{
$src_width=$getimgsize[0];
$src_height=$getimgsize[1];
if($src_width==0||$src_height==0){
return0;
}
}
$src_scale=$src_width/$src_height;
$des_scale=$forcedwidth/$forcedheight;
if($src_width<=$forcedwidth&&$src_height<=$forcedheight){
$des_width=$src_width;
$des_height=$src_height;
$n=clip($sourcefile,$destfile,0,0,$des_width,$des_height);
returnfilesize($destfile);
//原图为横着的矩形
}elseif($src_scale>=$des_scale){
//以原图的高度作为标准，进行缩略
$des_height=$src_height;
$des_width=$src_height/$des_scale;
$n=clip($sourcefile,$destfile,0,0,$des_width,$des_height);
if($n<=0)return0;
$r=thumb($destfile,$destfile,$forcedwidth,$forcedheight);
return$r[''filesize''];
//原图为竖着的矩形
}else{
//以原图的宽度作为标准，进行缩略
$des_width=$src_width;
$des_height=$src_width/$des_scale;
$n=clip($sourcefile,$destfile,0,0,$des_width,$des_height);
if($n<=0)return0;
$r=thumb($destfile,$destfile,$forcedwidth,$forcedheight);
return$r[''filesize''];
}
}
?>
我们php中设置返回内容，会发现，在出现相应情况后，返回内容出现在页面的iframe中，所以我们设定了相应的class，以便前端获得返回内容，做出相应处理。clip(),clip_thumb()为裁剪图片函数，可压缩图片大小，裁取图片以左上角为起点，长宽为100的正方形。
js:
复制代码代码如下:
varjsubmit_file=jinput.filter(''[name="submit_file"]'');
varjfile=jinput.filter(''[name="file"]'');
varjiframe=$(''#iframe'');
varjthumb=$(''.thumb'');
vartype='''';
jfile.on(''change'',function(){
varpath=jfile.val();
varfile_arr=path.split(''.'');
type=file_arr[file_arr.length-1];
jsubmit_file.trigger(''click'');
});
jiframe.on(''load'',function(){
varjiframe_message=$(window.frames[''iframe''].document).find(''.iframe_message'');
if(jiframe_message.attr(''status'')!=0){
varurl=this.contentWindow.location.href;
varurl_arr=url.split(''='');
jthumb.attr(''src'',url_arr[1]+''.''+type);
}
alert(jiframe_message.text());
});
这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能，网上有各种插件，虽然功能丰富，就是体积太大，这个看我们取舍了。
|
|
