当前位置:Gxlcms > PHP教程 > 上传头像,界面无跳转,php+js_PHP教程

上传头像,界面无跳转,php+js_PHP教程

时间:2021-07-01 10:21:17 帮助过:1人阅读

上传头像,界面无跳转的方式很多,我用的是加个iframe那种。下面直接上代码。

html:

//route 为后端接口
//upload/avatar 为上传的头像的保存地址
//imgurl=/upload/avatar/ 这里最后的是为了后面用js实现即时显示最新的更换后的头像用的,参照下面的js部分的代码
//头像保存名称为uid.type,如1.jpg,2.png等
//$user['avatar'] 用户如果上传过头像,该用户数据库中的avatar字段将赋予时间戳,否则为空
$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, 0, 0, 100, 100);   clip_thumb($file_path.$new_name, $file_path.$new_name, 100, 100);   //向数据表写入文件存储信息以便管理   user_update($user['uid'], array('avatar'=>time()));   exit("

文件上传成功

"); } else {   exit("

无正确的文件上传

"); }
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());
    });

这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能,网上有各种插件,虽然功能丰富,就是体积太大,这个看我们取舍了。

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/761104.htmlTechArticle上传头像,界面无跳转的方式很多,我用的是加个iframe那种。下面直接上代码。 html: //route 为后端接口 //upload/avatar 为上传的头像的保存地...

人气教程排行