php+js iframe实现上传头像界面无跳转


Posted in PHP onApril 29, 2014

上传头像,界面无跳转的方式很多,我用的是加个iframe那种。下面直接上代码。

html:

//route 为后端接口 
//upload/avatar 为上传的头像的保存地址 
//imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的,参照下面的js部分的代码 
//头像保存名称为uid.type,如1.jpg,2.png等 
//$user['avatar'] 用户如果上传过头像,该用户数据库中的avatar字段将赋予时间戳,否则为空 
<form target="iframe" enctype="multipart/form-data" action="route?imgurl=/upload/avatar/<?=$uid?>" method="post" id="upload_form"> 
<img class="thumb" src="<?php if($user['avatar']) echo $my_img; else echo '/view/img/100.png'; ?>" style="width:100px; height:100px;" /> 
<input type="file" name="file" size="28" /> 
<input type="submit" name="submit_file" value="确定" style="display: none;"/> 
</form> 
<iframe id="iframe" name="iframe" style="display: none;"></iframe>

php:
$token = param('token'); 
$user = user_from_token($token); 
!$user AND exit("<p class='iframe_message' status='0'>$lang[user_not_exists]</p>"); 
//文件存储路径 
$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 > 2097152 AND exit("<p class='iframe_message' status='0'>对不起,您上传的照片超过了2M</p>"); 

$_FILES["file"]["error"] > 0 AND exit("<p class='iframe_message' status='0'>文件上传发生错误:".$_FILES["file"]["error"]."</p>"); 

//获得文件扩展名 

$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("<p class='iframe_message' status='0'>上传文件扩展名是不允许的扩展名</p>"); 

} 

//删除目录下相同前缀的文件 

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("<p class='iframe_message' status='1'>文件上传成功</p>"); 
} else { 

exit("<p class='iframe_message' status='0'>无正确的文件上传</p>"); 
} 
<?php 
function ext($filename) { 
return strtolower(substr(strrchr($filename, '.'), 1)); 
} 
/* 
实例: 
thumb(APP_PATH.'xxx.jpg', APP_PATH.'xxx_thumb.jpg', 200, 200); 
返回: 
array('filesize'=>0, 'width'=>0, 'height'=>0) 
*/ 
function thumb($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; 
} 
/* 
* 图片裁切 
* 
* @param string $srcname 原图片路径(绝对路径/*.jpg) 
* @param string $forcedheight 裁切后生成新名称(绝对路径/rename.jpg) 
* @param int $sourcefile 被裁切图片的X坐标 
* @param int $destfile 被裁切图片的Y坐标 
* @param int $destext 被裁区域的宽度 
* @param int $imgcomp 被裁区域的高度 
clip('xxx/x.jpg', 'xxx/newx.jpg', 10, 40, 150, 150) 
*/ 
function clip($sourcefile, $destfile, $clipx, $clipy, $clipwidth, $clipheight) { 
$getimgsize = getimagesize($sourcefile); 
if(empty($getimgsize)) { 
return 0; 
} else { 
$imgwidth = $getimgsize[0]; 
$imgheight = $getimgsize[1]; 
if($imgwidth == 0 || $imgheight == 0) { 
return 0; 
} 
} 
if(!function_exists('imagecreatefromjpeg')) { 
copy($sourcefile, $destfile); 
return filesize($destfile); 
} 
switch($getimgsize[2]) { 
case 1 : 
$imgcolor = imagecreatefromgif($sourcefile); 
break; 
case 2 : 
$imgcolor = imagecreatefromjpeg($sourcefile); 
break; 
case 3 : 
$imgcolor = imagecreatefrompng($sourcefile); 
break; 
} 
//$imgcolor = imagecreatefromjpeg($sourcefile); 
$img_dst = imagecreatetruecolor($clipwidth, $clipheight); 
$img_color = imagecolorallocate($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, 不需要返回宽高。 
function clip_thumb($sourcefile, $destfile, $forcedwidth = 80, $forcedheight = 80) { 
// 获取原图片宽高 
$getimgsize = getimagesize($sourcefile); 
if(empty($getimgsize)) { 
return 0; 
} else { 
$src_width = $getimgsize[0]; 
$src_height = $getimgsize[1]; 
if($src_width == 0 || $src_height == 0) { 
return 0; 
} 
} 
$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); 
return filesize($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) return 0; 
$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) return 0; 
$r = thumb($destfile, $destfile, $forcedwidth, $forcedheight); 
return $r['filesize']; 
} 
} 
?>

我们php中设置返回内容,会发现,在出现相应情况后,返回内容出现在页面的iframe中,所以我们设定了相应的class,以便前端获得返回内容,做出相应处理。clip(),clip_thumb()为裁剪图片函数,可压缩图片大小,裁取图片以左上角为起点,长宽为100的正方形。

js:

var jsubmit_file = jinput.filter('[name="submit_file"]'); 
var jfile = jinput.filter('[name="file"]'); 
var jiframe = $('#iframe'); 
var jthumb = $('.thumb'); 
var type = ''; 
jfile.on('change', function() { 
var path = jfile.val(); 
var file_arr = path.split('.'); 
type = file_arr[file_arr.length-1]; 
jsubmit_file.trigger('click'); 
}); 
jiframe.on('load', function() { 
var jiframe_message = $(window.frames['iframe'].document).find('.iframe_message'); 
if(jiframe_message.attr('status') != 0) { 
var url = this.contentWindow.location.href; 
var url_arr = url.split('='); 
jthumb.attr('src', url_arr[1] + '.' + type); 
} 
alert(jiframe_message.text()); 
});

这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能,网上有各种插件,虽然功能丰富,就是体积太大,这个看我们取舍了。
PHP 相关文章推荐
使用PHP破解防盗链图片的一个简单方法
Jun 07 PHP
ThinkPHP令牌验证实例
Jun 18 PHP
ThinkPHP的MVC开发机制实例解析
Aug 23 PHP
php浏览历史记录的方法
Mar 10 PHP
学习php设计模式 php实现备忘录模式(Memento)
Dec 09 PHP
php+MySql实现登录系统与输出浏览者信息功能
Jul 01 PHP
php原生导出excel文件的两种方法(推荐)
Nov 19 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
Aug 12 PHP
PHP中有关长整数的一些操作教程
Sep 11 PHP
laravel 实现划分admin和home 模块分组
Oct 15 PHP
基于PHP实现邮箱验证激活过程详解
Oct 28 PHP
详解PHP设计模式之依赖注入模式
May 25 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
Apr 29 #PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
Apr 29 #PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
Apr 29 #PHP
PHP include任意文件或URL介绍
Apr 29 #PHP
php调用google接口生成二维码示例
Apr 28 #PHP
php将字符串转化成date存入数据库的两种方式
Apr 28 #PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
Apr 28 #PHP
You might like
php获取mysql数据库中的所有表名的代码
2011/04/23 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
详细分析python3的reduce函数
2017/12/05 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python多线程实现TCP服务端
2019/09/03 Python
python集合常见运算案例解析
2019/10/17 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
应届生服务员求职信
2013/10/31 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
护理医院见习报告
2014/11/03 职场文书
运动会800米赞词
2015/07/22 职场文书
2015年中秋节主持词
2015/07/30 职场文书
安全生产学习心得体会
2016/01/18 职场文书
导游词之峨眉山
2019/12/16 职场文书
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle