·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> php网站开发 >> 上传头像,界面无跳转,php+js

上传头像,界面无跳转,php+js

作者:佚名      php网站开发编辑:admin      更新时间:2022-07-23
上传头像,界面无跳转,php+js

上传头像,界面无跳转的方式很多,我用的是加个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>");}
<?phpfunction 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 = jf