php+js iframe實(shí)現(xiàn)上傳頭像界面無(wú)跳轉(zhuǎn)
html:
//route 為后端接口
//upload/avatar 為上傳的頭像的保存地址
//imgurl=/upload/avatar/<?=$uid?> 這里最后的<?=$uid?>是為了后面用js實(shí)現(xiàn)即時(shí)顯示最新的更換后的頭像用的,參照下面的js部分的代碼
//頭像保存名稱為uid.type,如1.jpg,2.png等
//$user['avatar'] 用戶如果上傳過(guò)頭像,該用戶數(shù)據(jù)庫(kù)中的avatar字段將賦予時(shí)間戳,否則為空
<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>");
//文件存儲(chǔ)路徑
$file_path="./upload/avatar/";
//664權(quán)限為文件屬主和屬組用戶可讀和寫,其他用戶只讀。
if(is_dir($file_path) != TRUE) mkdir($file_path, 0664) ;
//定義允許上傳的文件擴(kuò)展名
$ext_arr = array("gif", "jpg", "jpeg", "png", "bmp");
if (empty($_FILES) === false) {
//判斷檢查
$photo_up_size > 2097152 AND exit("<p class='iframe_message' status='0'>對(duì)不起,您上傳的照片超過(guò)了2M</p>");
$_FILES["file"]["error"] > 0 AND exit("<p class='iframe_message' status='0'>文件上傳發(fā)生錯(cuò)誤:".$_FILES["file"]["error"]."</p>");
//獲得文件擴(kuò)展名
$temp_arr = explode(".", $_FILES["file"]["name"]);
$file_ext = array_pop($temp_arr);
$file_ext = trim($file_ext);
$file_ext = strtolower($file_ext);
//檢查擴(kuò)展名
if (in_array($file_ext, $ext_arr) === false) {
exit("<p class='iframe_message' status='0'>上傳文件擴(kuò)展名是不允許的擴(kuò)展名</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);
}
}
//以u(píng)id重命名文件
$new_name = $user['uid'].".".$file_ext;
//將文件移動(dòng)到存儲(chǔ)目錄下
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);
//向數(shù)據(jù)表寫入文件存儲(chǔ)信息以便管理
user_update($user['uid'], array('avatar'=>time()));
exit("<p class='iframe_message' status='1'>文件上傳成功</p>");
} else {
exit("<p class='iframe_message' status='0'>無(wú)正確的文件上傳</p>");
}
<?php
function ext($filename) {
return strtolower(substr(strrchr($filename, '.'), 1));
}
/*
實(shí)例:
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;
}
// 按規(guī)定比例縮略
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 原圖片路徑(絕對(duì)路徑/*.jpg)
* @param string $forcedheight 裁切后生成新名稱(絕對(duì)路徑/rename.jpg)
* @param int $sourcefile 被裁切圖片的X坐標(biāo)
* @param int $destfile 被裁切圖片的Y坐標(biāo)
* @param int $destext 被裁區(qū)域的寬度
* @param int $imgcomp 被裁區(qū)域的高度
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;
}
// 先裁切后縮略,因?yà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) {
// 以原圖的高度作為標(biāo)準(zhǔn),進(jìn)行縮略
$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 {
// 以原圖的寬度作為標(biāo)準(zhǔn),進(jìn)行縮略
$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中設(shè)置返回內(nèi)容,會(huì)發(fā)現(xiàn),在出現(xiàn)相應(yīng)情況后,返回內(nèi)容出現(xiàn)在頁(yè)面的iframe中,所以我們?cè)O(shè)定了相應(yīng)的class,以便前端獲得返回內(nèi)容,做出相應(yīng)處理。clip(),clip_thumb()為裁剪圖片函數(shù),可壓縮圖片大小,裁取圖片以左上角為起點(diǎn),長(zhǎng)寬為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());
});
這樣基本就實(shí)現(xiàn)了圖片上傳、上傳結(jié)果提示、即時(shí)顯示上傳的最新頭像這幾個(gè)功能,網(wǎng)上有各種插件,雖然功能豐富,就是體積太大,這個(gè)看我們?nèi)∩崃恕?
- PHP+iframe模擬Ajax上傳文件功能示例
- php+iframe實(shí)現(xiàn)隱藏?zé)o刷新上傳文件
- PHP+iFrame實(shí)現(xiàn)頁(yè)面無(wú)需刷新的異步文件上傳
- php利用iframe實(shí)現(xiàn)無(wú)刷新文件上傳功能的代碼
- php表單文件iframe異步上傳實(shí)例講解
- PHP+iframe圖片上傳實(shí)現(xiàn)即時(shí)刷新效果
- PHP 圖片文件上傳實(shí)現(xiàn)代碼
- 一個(gè)經(jīng)典的PHP文件上傳類分享
- PHP文件上傳實(shí)例詳解?。?!
- php+iframe 實(shí)現(xiàn)上傳文件功能示例
相關(guān)文章
php設(shè)計(jì)模式之策略模式應(yīng)用案例詳解
這篇文章主要介紹了php設(shè)計(jì)模式之策略模式,結(jié)合具體應(yīng)用案例形式詳細(xì)分析了php策略模式的原理、定義、實(shí)現(xiàn)方法及項(xiàng)目應(yīng)用案例與操作注意事項(xiàng),需要的朋友可以參考下2019-06-06PHP利用ueditor實(shí)現(xiàn)上傳圖片添加水印
在上傳圖片時(shí),有時(shí)需要添加水印。如果每個(gè)都用PS添加的話,會(huì)有些麻煩。本文將為大家介紹PHP如何利用ueditor實(shí)現(xiàn)上傳圖片添加水印,感興趣的可以了解一下2022-07-07php array_map array_multisort 高效處理多維數(shù)組排序
用array_map和array_multisort高效處理多維數(shù)組排序的實(shí)現(xiàn)代碼。2009-06-06php實(shí)現(xiàn)將Session寫入數(shù)據(jù)庫(kù)
這篇文章主要介紹了php實(shí)現(xiàn)將Session寫入數(shù)據(jù)庫(kù)的相關(guān)資料,需要的朋友可以參考下2015-07-07PHP實(shí)現(xiàn)上傳多圖即時(shí)顯示與即時(shí)刪除的方法
這篇文章主要介紹了PHP實(shí)現(xiàn)上傳多圖即時(shí)顯示與即時(shí)刪除的方法,結(jié)合實(shí)例形式分析了php針對(duì)圖片文件的預(yù)覽、上傳及刪除相關(guān)操作技巧,需要的朋友可以參考下2017-05-05利用PHP獲取訪客IP、地區(qū)位置、瀏覽器及來(lái)源頁(yè)面等信息
這篇文章主要介紹了利用PHP獲取訪客IP、地區(qū)位置、瀏覽器及來(lái)源頁(yè)面等信息的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06php array_key_exists() 與 isset() 的區(qū)別
這篇文章主要介紹了php array_key_exists() 與 isset() 的區(qū)別的相關(guān)資料,需要的朋友可以參考下2016-10-10php更新mysql后獲取影響的行數(shù)發(fā)生異常解決方法
mysql_affected_rows函數(shù)當(dāng)UPDATE前后的數(shù)據(jù)一樣時(shí)會(huì)返回異常值,接下來(lái)為大家介紹個(gè)簡(jiǎn)單的解決方法感興趣的朋友可以參考下哈2013-03-03PHP laravel實(shí)現(xiàn)配置使用多數(shù)據(jù)庫(kù)
有的時(shí)候,我們?cè)陂_發(fā)的過(guò)程中需要連接多個(gè)數(shù)據(jù)庫(kù)。Laravel框架中早已為我們想到了這樣的需求。這篇文章主要為大家介紹了laravel配置使用多數(shù)據(jù)庫(kù)的方法,需要的可以參考一下2022-10-10