Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > body text

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

WBOY
Release： 2016-07-13 10:31:45
Original
885 people have browsed it

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

html:

//route 为后端接口<br />//upload/avatar　为上传的头像的保存地址<br />//imgurl=/upload/avatar/<?=$uid?> 这里最后的<?=$uid?>是为了后面用js实现即时显示最新的更换后的头像用的，参照下面的js部分的代码<br />//头像保存名称为uid.type，如1.jpg,2.png等<br />//$user['avatar'] 用户如果上传过头像，该用户数据库中的avatar字段将赋予时间戳，否则为空<br /><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'; ? alt="上传头像,界面无跳转,php+js_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");
<br />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>");
}
Copy after login
<?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'];
		}
	}

?>
Copy after login

我们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());
    });
Copy after login

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

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/761104.htmlTechArticle上传头像，界面无跳转的方式很多，我用的是加个iframe那种。下面直接上代码。 html: //route 为后端接口 //upload/avatar 为上传的头像的保存地...
Related labels：
aspnet software programming
source：php.cn
Previous article：PHP uses curl to crawl Sina Weibo content example_PHP tutorial Next article：php excel (转)_PHP教程
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1907
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
10
2080
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
1752
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1650
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1660
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template