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

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

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

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

时间： 2024-10-22 20:26:31

php+js iframe实现上传头像界面无跳转_php技巧的相关文章

JS仿flash上传头像效果实现代码_javascript技巧

先看效果图(在FF下): 下面是我整个的思路: 一.用ajaxFileUpload.js异步上传图片.这个不用多说了,挺简单的东西. 二.div拖拽用jquery-ui.这个也不多说了. 三.上传过图片的处理. 编辑容器是300*300,如果图片不在300*300之内,这里会生成一个maxHeight=300,maxWidth=300的缩略图, 用于设置编辑容器的背景,如果原文件为123.jpg,这里生成的文件为123.jpg.view.jpg,当然,文件123.jpg.view.jpg可能不会

浅析上传头像示例及其注意事项_javascript技巧

这次分享一个简易的上传头像示例,其大致流程为: 一.将选择的图片转为base64字符串 function preview(file) {//预览图片得到图片base64 var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ prevDiv.innerHT

实现Asp.net mvc上传头像加剪裁功能_实用技巧

在我们使用QQ上传头像,注册用户账号时是不是都会遇到上传图像,并根据自己的要求对图像进行裁剪,这是怎么实现的呐? 本文主要介绍了Asp.net mvc实现上传头像加剪裁功能,分享给大家供大家参考.具体如下:  运行效果截图如下: 具体代码如下: 前台代码 <link href="~/Content/fineuploader.css" rel="stylesheet" /> <link href="~/Content/jquery.Jcro

js实现文件上传表单域美化特效_javascript技巧

一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的<input type="file">元素,然后使用一个<label>元素来制作美化效果. HTML结构 该文件上传域美化效果最基本的HTML结构如下: <input type="file" name="file" id="file" class=&qu

PHP实现多图上传(结合uploadify插件)思路分析_php技巧

本文实例讲述了PHP实现多图上传的方法.分享给大家供大家参考,具体如下: 1.已有图片可以删除 2.有一个新增的按钮 3.点击新增按钮,跳出frame框 4.在frame框中实现图片异步上传与及时效果 5.上传成功后,调用回调函数 6.弹出框中的图片可以进行删除 7.frame弹出框点击保存,把图片通过js展示到页面中 8.页面点击保存,把图片数据保存到数据库 <?php foreach($info['product_img'] as $product_img) { ?> <div st

php文件上传、下载和删除示例_php技巧

php文件上传.下载和删除示例大体思路如下,具体内容如下 一.文件上传 1.把上传文件的区域做出来 div1 2.把显示文件的区域做出来 div2 3.提交表单,上传文件 4.服务器接收文件数据 用$_FILE[name]接收 5.处理数据,看上传文件是否有错误 错误有如下几种: 1).上传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值 2).上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值 3).文件只有部分被上传 4).

php实现SAE上使用storage上传与下载文件的方法_php技巧

本文实例讲述了php实现SAE上使用storage上传与下载文件的方法.分享给大家供大家参考.具体如下: <?php if ($_FILES["file"]["error"] > 0) { echo "Error: " . $_FILES["file"]["error"] . "<br />"; } else { echo "Upload: "

php 修改上传文件大小限制实例详解_php技巧

1. 修改 max_execution_time 在php中,默认的页面最久执行时间为 30 秒,超过30秒,该脚本就停止执行. 这样就会出现无法打开网页的情况.这时我们可以修改 max_execution_time 在php.ini里查找 max_execution_time 默认是30秒.改为 max_execution_time = 0 0表示没有限制 2. 修改 post_max_size post_max_size 设定 POST 数据所允许的最大大小.此设定也影响到文件上传. php

php文件上传 你真的掌握了吗_php技巧

这里首先声明一下这一章的内容比较多,比较难,你要抱着和自己死磕的态度.细微之处不放过,多敲多练是王道. 学习就像爬山,得一步一步来,首先给自己定一个小目标,然后再坚持不懈地往高出攀爬,最终到达最顶峰. 请仔细斟酌上面两句忠告 一.我的准备情况说明. 编辑器:sublime text3(用什么编辑器看自己爱好) 服务器构建:使用phpstudy2014构建服务器,服务器文件存储在我自身电脑D盘的www文件中.(安装phpstudy会自动生成www文件,安装在哪个盘自己做主).运行phpstudy,