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下载远程文件类(支持断点续传)
Nov 14 PHP
linux下 C语言对 php 扩展
Dec 14 PHP
php 分页函数multi() discuz
Jun 21 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
Sep 13 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
Jun 05 PHP
php 使用GD库为页面增加水印示例代码
Mar 24 PHP
php缓冲输出实例分析
Jan 05 PHP
php实现将字符串按照指定距离进行分割的方法
Mar 14 PHP
PHP实现上传文件并存进数据库的方法
Jul 16 PHP
PHP微信开发用Cache 解决数据缓存
Jul 11 PHP
Yii视图CGridView列表用法实例分析
Jul 12 PHP
php微信公众平台配置接口开发程序
Sep 22 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
flask开启多线程的具体方法
2020/08/02 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
婚礼司仪主持词
2014/03/14 职场文书
小学教师寄语大全
2014/04/03 职场文书
法定代表人授权委托书
2014/04/04 职场文书
《锄禾》教学反思
2014/04/08 职场文书
保护母亲河倡议书
2014/04/14 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
开除员工通知
2015/04/22 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
javascript数组includes、reduce的基本使用
2021/07/02 Javascript