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

前端之家收集整理的这篇文章主要介绍了php+js iframe实现上传头像界面无跳转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上传头像,界面无跳转的方式很多,我用的是加个iframe那种。下面直接上代码。 html:
<div class="codetitle"><a style="CURSOR: pointer" data="34815" class="copybut" id="copybut34815" onclick="doCopy('code34815')"> 代码如下:

<div class="codebody" id="code34815">
//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">


<input type="submit" name="submit_file" value="确定" style="display: none;"/>

<iframe id="iframe" name="iframe" style="display: none;">

PHP:
<div class="codetitle"><a style="CURSOR: pointer" data="26529" class="copybut" id="copybut26529" onclick="doCopy('code26529')"> 代码如下:
<div class="codebody" id="code26529">
$token = param('token');
$user = user_from_token($token);
!$user AND exit("

$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 > 2097152 AND exit("

对不起,您上传的照片超过了2M

");
  $_FILES["file"]["error"] > 0 AND exit("

文件上传发生错误:".$_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,100,100);
  clip_thumb($file_path.$new_name,100);
  //向数据表写入文件存储信息以便管理
  user_update($user['uid'],array('avatar'=>time()));
  exit("

文件上传成功

");
} else {
  exit("

无正确的文件上传

");
} <?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,'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);
imagefill($img_dst,$img_color);
imagecopyresampled($img_dst,$img_src,$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,$imgcomp); break;
case 'png': imagepng($img_dst,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,$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,$imgcolor,$imgwidth,$imgheight,$imgheight);
$tmpfile = $destfile;
imagejpeg($img_dst,100);
$n = filesize($tmpfile);
copy($tmpfile,$destfile);
return $n;
} // 先裁切后缩略,因为确定了,width,height,不需要返回宽高。
function clip_thumb($sourcefile,$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,$des_height);
return filesize($destfile);
// 原图为横着的矩形
} elseif($src_scale >= $des_scale) {
// 以原图的高度作为标准,进行缩略
$des_height = $src_height;
$des_width = $src_height / $des_scale;
$n = clip($sourcefile,$des_height);
if($n <= 0) return 0;
$r = thumb($destfile,$forcedwidth,$forcedheight);
return $r['filesize'];
// 原图为竖着的矩形
} else {
// 以原图的宽度作为标准,进行缩略
$des_width = $src_width;
$des_height = $src_width / $des_scale;
$n = clip($sourcefile,$forcedheight);
return $r['filesize'];
}
} ?>

我们PHP中设置返回内容,会发现,在出现相应情况后,返回内容出现在页面的iframe中,所以我们设定了相应的class,以便前端获得返回内容,做出相应处理。clip(),clip_thumb()为裁剪图片函数,可压缩图片大小,裁取图片以左上角为起点,长宽为100的正方形。 js:
<div class="codetitle"><a style="CURSOR: pointer" data="4503" class="copybut" id="copybut4503" onclick="doCopy('code4503')"> 代码如下:
<div class="codebody" id="code4503">
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相关文章