首页 > 上网技巧 > 电脑小技巧 > php+js iframe实现上传头像界面无跳转

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

时间:2018-08-12 10:52 作者:QQ地带 我要评论

上传头像,界面无跳转的方式很多,我用的是加个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()); 
}); 
 
这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能,网上有各种插件,虽然功能丰富,就是体积太大,这个看我们取舍了。

标签: JS php
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告