上传头像，界面无跳转的方式很多，我用的是加个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>");
}
<?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());
});
这样基本就实现了图片上传、上传结果提示、即时显示上传的最新头像这几个功能，网上有各种插件，虽然功能丰富，就是体积太大，这个看我们取舍了。
Funktionsfunktionsverwendung
So zeigen Sie gespeicherte Prozeduren in MySQL an
So überprüfen Sie gelöschte Anrufaufzeichnungen
Der Unterschied zwischen insertbefore und before
Welche Sprache wird im Allgemeinen zum Schreiben von vscode verwendet?
So konvertieren Sie NEF in das JPG-Format
Ranking der zehn besten digitalen Währungsbörsen
Was ist der Kern eines Datenbanksystems?
