php+jsiframe实现上传头像界面无跳转_php技巧

<br>//route 为后端接口 <br>//upload/avatar　为上传的头像的保存地址 <br>//imgurl=/upload/avatar/<!--?=$uid?--> 这里最后的<!--?=$uid?-->是为了后面用js实现即时显示最新的更换后的头像用的，参照下面的js部分的代码 <br>//头像保存名称为uid.type，如1.jpg,2.png等 <br>//$user['avatar'] 用户如果上传过头像，该用户数据库中的avatar字段将赋予时间戳，否则为空 <br> <br><iframe id="iframe" name="iframe" style="display: none;"></iframe> <br> <br>php: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$token = param('token'); <br>$user = user_from_token($token); <br>!$user AND exit("<p class="iframe_message" status="0">$lang[user_not_exists]</p>"); <br>//文件存储路径 <br>$file_path="./upload/avatar/"; <br>//664权限为文件属主和属组用户可读和写，其他用户只读。 <br>if(is_dir($file_path) != TRUE) mkdir($file_path, 0664) ; <br>//定义允许上传的文件扩展名 <br>$ext_arr = array("gif", "jpg", "jpeg", "png", "bmp"); <br><br>if (empty($_FILES) === false) { <br>　　//判断检查 <br>　　$photo_up_size > 2097152 AND exit("<p class="iframe_message" status="0">对不起，您上传的照片超过了2M</p>"); <br>　　$_FILES["file"]["error"] > 0 AND exit("<p class="iframe_message" status="0">文件上传发生错误：".$_FILES["file"]["error"]."</p>"); <br>　　//获得文件扩展名 <br>　　$temp_arr = explode(".", $_FILES["file"]["name"]); <br>　　$file_ext = array_pop($temp_arr); <br>　　$file_ext = trim($file_ext); <br>　　$file_ext = strtolower($file_ext); <br>　　//检查扩展名 <br>　　if (in_array($file_ext, $ext_arr) === false) { <br>　　　　exit("<p class="iframe_message" status="0">上传文件扩展名是不允许的扩展名</p>"); <br>　　} <br>　　//删除目录下相同前缀的文件 <br>　　if($dh = opendir($file_path)) { <br>　　　　while(($file = readdir($dh)) !== false) { <br>　　　　　　$file_arr = $file.split('.'); <br>　　　　　　if($file_arr[0] == $user['uid']) unlink($file_path.$file); <br>　　　　} <br>　　} <br>　　//以uid重命名文件 <br>　　$new_name = $user['uid'].".".$file_ext; <br>　　//将文件移动到存储目录下 <br>　　move_uploaded_file($_FILES["file"]["tmp_name"], $file_path.$new_name); <br>　　//裁剪压缩图片 <br>　　clip($file_path.$new_name, $file_path.$new_name, 0, 0, 100, 100); <br>　　clip_thumb($file_path.$new_name, $file_path.$new_name, 100, 100); <br>　　//向数据表写入文件存储信息以便管理 <br>　　user_update($user['uid'], array('avatar'=>time())); <br>　　exit("<p class="iframe_message" status="1">文件上传成功</p>"); <br>} else { <br>　　exit("<p class="iframe_message" status="0">无正确的文件上传</p>"); <br>} <br><br><!--?php <br--><br>function ext($filename) { <br>return strtolower(substr(strrchr($filename, '.'), 1)); <br>} <br><br>/* <br>实例： <br>thumb(APP_PATH.'xxx.jpg', APP_PATH.'xxx_thumb.jpg', 200, 200); <br><br>返回： <br>array('filesize'=>0, 'width'=>0, 'height'=>0) <br>*/ <br>function thumb($sourcefile, $destfile, $forcedwidth = 80, $forcedheight = 80) { <br>$return = array('filesize'=>0, 'width'=>0, 'height'=>0); <br>$imgcomp = 10; <br>$destext = ext($destfile); <br>if(!in_array($destext, array('gif', 'jpg', 'bmp', 'png'))) { <br>return $return; <br>} <br><br>$imgcomp = 100 - $imgcomp; <br>$imginfo = getimagesize($sourcefile); <br>$src_width = $imginfo[0]; <br>$src_height = $imginfo[1]; <br>if($src_width == 0 || $src_height == 0) { <br>return $return; <br>} <br>$src_scale = $src_width / $src_height; <br>$des_scale = $forcedwidth / $forcedheight; <br><br>if(!function_exists('imagecreatefromjpeg')) { <br>copy($sourcefile, $destfile); <br>$return = array('filesize'=>filesize($destfile), 'width'=>$src_width, 'height'=>$src_height); <br>return $return; <br>} <br><br>// 按规定比例缩略 <br>if($src_width <= $forcedwidth && $src_height <= $forcedheight) { <br>$des_width = $src_width; <br>$des_height = $src_height; <br>} elseif($src_scale >= $des_scale) { <br>$des_width = ($src_width >= $forcedwidth) ? $forcedwidth : $src_width; <br>$des_height = $des_width / $src_scale; <br>$des_height = ($des_height >= $forcedheight) ? $forcedheight : $des_height; <br>} else { <br>$des_height = ($src_height >= $forcedheight) ? $forcedheight : $src_height; <br>$des_width = $des_height * $src_scale; <br>$des_width = ($des_width >= $forcedwidth) ? $forcedwidth : $des_width; <br>} <br><br>switch ($imginfo['mime']) { <br>case 'image/jpeg': <br>$img_src = imagecreatefromjpeg($sourcefile); <br>!$img_src && $img_src = imagecreatefromgif($sourcefile); <br>break; <br>case 'image/gif': <br>$img_src = imagecreatefromgif($sourcefile); <br>!$img_src && $img_src = imagecreatefromjpeg($sourcefile); <br>break; <br>case 'image/png': <br>$img_src = imagecreatefrompng($sourcefile); <br>break; <br>case 'image/wbmp': <br>$img_src = imagecreatefromwbmp($sourcefile); <br>break; <br>default : <br>return $return; <br>} <br><br>$img_dst = imagecreatetruecolor($des_width, $des_height); <br>$img_color = imagecolorallocate($img_dst, 255, 255, 255); <br>imagefill($img_dst, 0, 0 ,$img_color); <br>imagecopyresampled($img_dst, $img_src, 0, 0, 0, 0, $des_width, $des_height, $src_width, $src_height); <br>//$tmpfile = $temp_path.md5($destfile); <br>$tmpfile = $destfile; <br>switch($destext) { <br>case 'jpg': imagejpeg($img_dst, $tmpfile, $imgcomp); break; <br>case 'gif': imagegif($img_dst, $tmpfile, $imgcomp); break; <br>case 'png': imagepng($img_dst, $tmpfile, version_compare(PHP_VERSION, '5.1.2') == 1 ? 7 : 70); break; <br>} <br>$r = array('filesize'=>filesize($tmpfile), 'width'=>$des_width, 'height'=>$des_height);; <br>copy($tmpfile, $destfile); <br>//unlink($tmpfile); <br>imagedestroy($img_dst); <br>return $r; <br>} <br>/* <br>* 图片裁切 <br>* <br>* @param string $srcname 原图片路径(绝对路径/*.jpg) <br>* @param string $forcedheight 裁切后生成新名称(绝对路径/rename.jpg) <br>* @param int $sourcefile 被裁切图片的X坐标 <br>* @param int $destfile 被裁切图片的Y坐标 <br>* @param int $destext 被裁区域的宽度 <br>* @param int $imgcomp 被裁区域的高度 <br>clip('xxx/x.jpg', 'xxx/newx.jpg', 10, 40, 150, 150) <br>*/ <br>function clip($sourcefile, $destfile, $clipx, $clipy, $clipwidth, $clipheight) { <br>$getimgsize = getimagesize($sourcefile); <br>if(empty($getimgsize)) { <br>return 0; <br>} else { <br>$imgwidth = $getimgsize[0]; <br>$imgheight = $getimgsize[1]; <br>if($imgwidth == 0 || $imgheight == 0) { <br>return 0; <br>} <br>} <br><br>if(!function_exists('imagecreatefromjpeg')) { <br>copy($sourcefile, $destfile); <br>return filesize($destfile); <br>} <br>switch($getimgsize[2]) { <br>case 1 : <br>$imgcolor = imagecreatefromgif($sourcefile); <br>break; <br>case 2 : <br>$imgcolor = imagecreatefromjpeg($sourcefile); <br>break; <br>case 3 : <br>$imgcolor = imagecreatefrompng($sourcefile); <br>break; <br>} <br>//$imgcolor = imagecreatefromjpeg($sourcefile); <br>$img_dst = imagecreatetruecolor($clipwidth, $clipheight); <br>$img_color = imagecolorallocate($img_dst, 255, 255, 255); <br>imagefill($img_dst, 0, 0, $img_color); <br>imagecopyresampled($img_dst, $imgcolor, 0, 0, $clipx, $clipy, $imgwidth, $imgheight, $imgwidth, $imgheight); <br>$tmpfile = $destfile; <br>imagejpeg($img_dst, $tmpfile, 100); <br>$n = filesize($tmpfile); <br>copy($tmpfile, $destfile); <br>return $n; <br>} <br><br>// 先裁切后缩略，因为确定了，width, height, 不需要返回宽高。 <br>function clip_thumb($sourcefile, $destfile, $forcedwidth = 80, $forcedheight = 80) { <br>// 获取原图片宽高 <br>$getimgsize = getimagesize($sourcefile); <br>if(empty($getimgsize)) { <br>return 0; <br>} else { <br>$src_width = $getimgsize[0]; <br>$src_height = $getimgsize[1]; <br>if($src_width == 0 || $src_height == 0) { <br>return 0; <br>} <br>} <br><br>$src_scale = $src_width / $src_height; <br>$des_scale = $forcedwidth / $forcedheight; <br><br>if($src_width <= $forcedwidth && $src_height <= $forcedheight) { <br>$des_width = $src_width; <br>$des_height = $src_height; <br>$n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); <br>return filesize($destfile); <br>// 原图为横着的矩形 <br>} elseif($src_scale >= $des_scale) { <br>// 以原图的高度作为标准，进行缩略 <br>$des_height = $src_height; <br>$des_width = $src_height / $des_scale; <br>$n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); <br>if($n <= 0) return 0; <br>$r = thumb($destfile, $destfile, $forcedwidth, $forcedheight); <br>return $r['filesize']; <br>// 原图为竖着的矩形 <br>} else { <br>// 以原图的宽度作为标准，进行缩略 <br>$des_width = $src_width; <br>$des_height = $src_width / $des_scale; <br>$n = clip($sourcefile, $destfile, 0, 0, $des_width, $des_height); <br>if($n <= 0) return 0; <br>$r = thumb($destfile, $destfile, $forcedwidth, $forcedheight); <br>return $r['filesize']; <br>} <br>} <br><br>?> <br> <br>我们php中设置返回内容，会发现，在出现相应情况后，返回内容出现在页面的iframe中，所以我们设定了相应的class，以便前端获得返回内容，做出相应处理。clip(),clip_thumb()为裁剪图片函数，可压缩图片大小，裁取图片以左上角为起点，长宽为100的正方形。 <br><br>js: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>var jsubmit_file = jinput.filter('[name="submit_file"]'); <br>var jfile = jinput.filter('[name="file"]'); <br>var jiframe = $('#iframe'); <br>var jthumb = $('.thumb'); <br>var type = ''; <br>jfile.on('change', function() { <br>var path = jfile.val(); <br>var file_arr = path.split('.'); <br>type = file_arr[file_arr.length-1]; <br>jsubmit_file.trigger('click'); <br>}); <br>jiframe.on('load', function() { <br>var jiframe_message = $(window.frames['iframe'].document).find('.iframe_message'); <br>if(jiframe_message.attr('status') != 0) { <br>var url = this.contentWindow.location.href; <br>var url_arr = url.split('='); <br>jthumb.attr('src', url_arr[1] + '.' + type); <br>} <br>alert(jiframe_message.text()); <br>}); <br> <br>这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能，网上有各种插件，虽然功能丰富，就是体积太大，这个看我们取舍了。                    </li></ol></pre></li></ol></pre>