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 裁剪图片成固定大小代码方法
Sep 09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
Feb 04 PHP
php图片的裁剪与缩放生成符合需求的缩略图
Jan 11 PHP
php gzip压缩输出的实现方法
Apr 27 PHP
利用PHP+JS实现搜索自动提示(实例)
Jun 09 PHP
基于PHP5魔术常量与魔术方法的详解
Jun 13 PHP
PHP的curl实现get,post和cookie(实例介绍)
Jun 17 PHP
CodeIgniter图像处理类的深入解析
Jun 17 PHP
php实现的click captcha点击验证码类实例
Sep 23 PHP
PHP自动生成表单代码分享
Jun 19 PHP
php实现统计目录文件大小的函数
Dec 25 PHP
Yii2实现多域名跨域同步登录退出
Feb 04 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日历程序
2006/12/06 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python2与Python3的区别点整理
2019/12/12 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
大二自我鉴定
2014/01/31 职场文书
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
创业计划书之面包店
2019/09/12 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android