在 php5 程式中使用 include 會多空一行的解決《by 童顏未老人》

　最近在使用 php 開發程式時碰到一個問題, 找了許久終於被我找到解法。當在 php 中使用 include 時，常常就會多空下一行來，使得版面常常是破壞的很慘, 例如 : 原先需要的效果


程式是直接寫在主體程式內這樣沒有問題！


但是因為這一塊是很多頁都要用到的，所以想把它改成是獨立一隻程式，然後讓每隻要用的程式再去 include 就好，所已改寫如下:


但是結果卻發生如下圖中，兩個圖片竟不會對齊了！


真是怪了，我到 google 上找了幾下，終於了解是因為 UTF-8 的 檔首有 BOM 字元，會造成 include 進來後就發生多空一行的情形 !

因我使用的 edit 是 Notepad++，只要將格式改存成 UTF-8 格式，檔首無 BOM 存檔檔後就恢復未用 include 前的排版效果了 !

對 高血壓有就醫但沒療效的一些看法《by 童顏未老人》

　在 2/5 的自由時報上有一篇 3成8高血壓患者 有就醫 但沒達到治療效果，這對台灣目前逐漸走向高齡化社會的大多數人來說，無疑是一項警訊！

　當然了，除了醫師所開的處方籤外，我們日常生活中亦可透過健康的飲食來逐漸改善高血壓的情況，請參考高血壓 - 常見病食療驗方，透過我們日常生活中的膳食來減緩高血壓，這應該是最自然與健康的方法了！大家可以多參考看看。不過，若人在感到不適時，請務必要上醫院去看醫生！

透過 javascript 來新增與刪除上傳檔案《by 童顏未老人》

　最近又碰到一個比較困難的東西，就是要在使用者上傳檔案時，需要可以任意的新增檔案，也要能隨意刪出任一個已選的檔案。

　如下圖是最先的狀況，


　使用者可以任意的點選「新增檔案」來增加上傳的檔案數。


　若覺得不妥想再刪除，只要點選該檔案後面的「刪除」，即可。


　新增的部份比較簡單，刪除的部份我花了不少時間才弄出來。

　在程式本體中，請如下的程式碼 :


主要是設了一個容器 fieldset 用來包含著每一個讓人去上傳檔案之用。在這裏先放上一個，方便使用者來用。當使用者想增加其它的檔案時，就點選上面的「新增檔案」按鈕，透過 onclick 去發動 addupload()。

var fieldcount = 1;

function addupload() {
fieldcount++;
var newfield = document.createElement('input');
newfield.type = 'file';
newfield.name = 'file' + fieldcount;
newfield.id = 'file' + fieldcount;
newfield.size = '60';
document.getElementById('fs').appendChild(newfield);

var newbutton = document.createElement('input');
newbutton.type = 'button';
newbutton.name = 'b' + fieldcount;
newbutton.id = 'b' + fieldcount;
newbutton.value = '刪除';
newbutton.onclick=function(){delfile(this.getAttribute('id'));};
document.getElementById('fs').appendChild(newbutton);

}

(以上 程式碼要包函在 script 和/script 中 )

因為我們在程式中已預先擺了一組可供使用者上傳用的檔案按鈕，所以作為 counter 用的 fieldcount 起始值為 1。然後每次被 call 一次 addupload 時，便立刻加一。然後利用 createElement 來創建兩個結點，一個是讓人上傳檔案用的欄位，另一個是用刪除該上傳欄位用的按鈕。各自將其 attribute 上進去後，在利用 appendChild 來將兩個節點上到 fs ( fieldset )這個父容器之下。

要想刪除認一指定的欄位時，同時也得把後面的刪除鈕一併刪除。當點選了「刪除」鈕時，會觸發 onclick 去執行 delfile(this.getAttribute('id')), 其中要把那一顆刪除鈕的 id 一併傳到delfile 這 function 去。

function delfile(idname) {
var filename = 'file' + idname.substr(1,1);

var filex = document.getElementById(filename);
var bx = document.getElementById(idname);
filex.parentNode.removeChild(filex);
bx.parentNode.removeChild(bx);
}

因為每一組的 上傳欄位的 id 都是 file1、file2、file3、....，其相對應的「刪除」鈕之 id 為 b1、b2、b3...，所以只要透過 substr(1,1) 將「刪除」鈕 id 的第二碼取出，便可組合出相對應上傳欄位的 id 名。最後透過 父容器的 removeChild 便可將兩者一一移去！

ie6 下的覆蓋問題解決《by 童顏未老人》

　這幾天被一個工作上的問題給困擾住了，小弟寫的網頁需要當滑鼠停在會員名字上或是會員的照片上時，要出現該會員的簡介。這功能原本不算太難，用小弟之前的方法，光用 css 就可以辦的很好。但是當套用在用會員照片排成的九宮格狀時，在 ie6 下會員名片會被隔壁的照片壓在下面弄的支離破碎，但是在 firefox 下卻仍有很好的表現。

慘不忍睹的 ie6 表現狀況：


firefox 下的狀況正是我所要的：


　但是我不能犧牲使用比例還是最多的 ie6 使用者，所以只得另謀他法了，有朋友介紹我使用
[jQuery] bgiframe Plugin，不過我現在情況很趕，無法仔系去鑽研 jQuery，那可得等我過年有空時慢慢去研究，我現在能用的便是 javascript 和 css 了，我試了一天後終於給我弄出來了。這想穿了其實也沒什麼高明之處，就是得花時間想一下。

首先在整個 程式最末端埋入一整段會員名片的程式碼，

<div style="position: absolute; width: 220px; height: 140px; z-index: 1;
left: -1000px; top: -1000px" id="mycard">
<table border="1" cellpadding="0" style="border-collapse: collapse"
width="220" id="table3"
height="140" bordercolor="#76A9B4">
<tr>
<td id="carddata" bgcolor="#E1F7F7">
<table width="220" height="140" border="0"
cellpadding="0" cellspacing="10" bgcolor="#E1F7F7">
<tr>
<td height="66" valign="top" align="center">
<table width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="66" valign="top" align="center">
<table width="66" height="66" border="0"
cellpadding="0" cellspacing="0" bgcolor="#418488">
<tr>
<td align="center"><img id="pic2" src=""
width="60" height="60"></td>
</tr>
</table>
</td>
<td width="8">&nbsp;</td>
<td valign="top"><table width="100%" height="22"
border="0" cellpadding="0"
cellspacing="0" bgcolor="#C0E2DF">
<tr>
<td width="5">&nbsp;</td>
<td valign="bottom"><span class="MwordCL01"
id='username'></span>&nbsp;-<span class="Sword02"
id="sexname"></span></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="5" height="24">&nbsp;</td>
<td height="24" valign="bottom">
<span class="Sword02">層級：</span>
<span class="Sword02" id="attname"></span></td>
</tr>
<tr>
<td width="5" height="19">&nbsp;</td>
<td height="19" valign="bottom">
<span class="Sword02">區域：</span>
<span class="Sword02" id="codename"></span></td>
</tr>
</table> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="SwordCL01">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">健康部落：</td>
<td height="19" class="Sword01"><nobr>
<? if ( strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")) { ?>
<span style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></span></nobr></td>
<? }else{ ?>
<div style="width:130;text-overflow: ellipsis;overflow: hidden;"
id="vip_name"></div></nobr></td>
<? } ?>
</tr>
<tr>
<td width="70" height="19" align="right"
class="SwordCL01">發表篇數：</td>
<td height="19" class="Sword01" id="doccnt">
<span class="Sword01">篇</span></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

因為我需要在整個網站到處都會用到這個會員名片，所以我是把它單獨寫成一斷的程式，然後在每一隻需要用的程式末端下

<?include('Common/card.phtml');?>
</div>
</body>
</html>

　然後另外再寫一支的放滿我需要的 junction 的 js ，也是方便每隻需要用到會員名片的程式來 call ！

<script language="javascript" src="/Js/feijer.js"></script>

其內容如下 :

function CardShow(obj,ty,lx,pic2,username,sexname,attname,codename,vip_name,doccnt){
enoter_IsBoard = 1;

if(enoter_IsBoard){

var enoter_demo = document.getElementById("mycard").style;
var leftNum,topNum;
enoter_demo.visibility="visible";

document.getElementById("pic2").src = pic2;
document.getElementById("username").innerHTML = username;
document.getElementById("sexname").innerHTML = sexname;
document.getElementById("attname").innerHTML = attname;
document.getElementById("codename").innerHTML = codename;
document.getElementById("vip_name").innerHTML = vip_name;
document.getElementById("doccnt").innerHTML = doccnt;
var _x = getObjX(obj);
var _y = getObjY(obj);

leftNum=19;
topNum=0;

document.getElementById("mycard").style.left = Number(_x) + lx +"px";
document.getElementById("mycard").style.top = Number(_y) + ty +"px";
}
}

function getObjX(obj){
var hlcleft = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlcleft += obj.offsetLeft;
obj = obj.offsetParent;
}
}else if (obj.x) hlcleft += obj.x;
return hlcleft;
}

function getObjY(obj){
var hlctop = 0;
if (obj.offsetParent){
while (obj.offsetParent){
hlctop += obj.offsetTop;
obj = obj.offsetParent;
}
}else if (obj.y)hlctop += obj.y;
return hlctop;
}

function CardClose(){
document.getElementById("mycard").style.left=-1000+"px";
document.getElementById("mycard").style.top=-1000+"px";
}

然後程式需要的地方，除了把值傳進去 function ，並可以指定名片視窗要出現在 父容器的那邊，因為有時那個名片太靠右邊時，會被畫面切割掉，這時就可以調整 ty lx 兩個值來指定七其位置。

<a href="<?=$Blog;?>"
onmouseover="CardShow(this,30,60,'<?=$pic2;?>','<?=$username;?>','<?=$sexname;?>',
'<?=$attname;?>','<?=$codename;?>',
'<?=$vip_name;?>','<?=$doccnt;?>');"
onmouseout="CardClose();">

所以當 onmouseover 被觸發時，便去 call js 中的 CardShow function ，再一一的將資料放會員名片中，如此便可以將名片無誤的在想要的地方去呈現。

php : 上傳圖片後再切出並縮小成正方形圖《by 童顏未老人》

　這次的新需求是，會員要可以上傳自己喜愛的照片，而且要大小不拘，然後需由每一張圖居中的取出最大範圍的正方形圖後，在把他縮小到 60 X 60 的大小去，再存到系統上面去，這樣一來可以減低系統的硬碟的負擔。要作到這樣的話，就必需要利用到 GD 的函數了。

　例如，一張 1600 X 1200 的照片上傳以後，需先拮取其中的 1200 X 1200 (中心點不變)，再將其縮小成 60 X 60 的圖片！

　在主要的輸入畫面上：

<form name="frm" method="POST" action="loadpic.php" enctype="multipart/form-data">
<input id="filename" type="file" size="45" name="filename">( 請上傳您的個人照片！)
<input type="submit" name="doit" value="送出">
</form>

在這裏最重要的是在 <form> 中必需要加上 enctype="multipart/form-data"！

而在 loadpic.php 這隻主要程式中，應如下的寫：

先定義出一個 function 用來抓副檔名：

function getFiletype ($FileName) {
$num=strrpos($FileName,".");
return ".".substr($FileName,$num+1);
}

// 取得上傳的圖片
$src = imagecreatefromjpeg($_FILES['filename']['tmp_name']);

// 取得圖片的寬
$src_w = imagesx($src);

// 取得圖片的長
$src_h = imagesy($src);

// 取得圖片的副檔名 ( 如 jpg, gif... )
$src_type = strtolower(getFiletype($_FILES["filename"]["name"]));

// 依長與寬兩者最短的邊來算出要抓的正方形邊長
if( $src_w > $src_h){
$new_w = $src_h;
$new_h = $src_h;
}else{
$new_w = $src_w;
$new_h = $src_w;
}

// 以長方形的中心來取得正方形的左上方原點
$srt_w = ( $src_w - $new_w ) / 2;
$srt_h = ( $src_h - $new_h ) / 2;

// 定義一個圖形 ( 針對正方形圖形 )
$newpc = imagecreatetruecolor($new_w,$new_h);

// 抓取正方形的截圖
imagecopy($newpc, $src, 0, 0, $srt_w, $srt_h, $new_w, $new_h );

// 建立縮圖
$finpic = imagecreatetruecolor(60,60);

// 開始縮圖
imagecopyresampled($finpic, $newpc, 0, 0, 0, 0, 60, 60, $new_w, $new_h);

// 儲存縮圖到指定的目錄存放 , 檔名就是記錄在 SESSION 中的 login name
imagejpeg($finpic,
"../../images/Upload/Users/".$_SESSION["MemberLoginName"].$src_type);

// 將檔名存到變數 $filename 去,以備記錄到 table 去，方便日後依會員的帳號來抓取圖片
$filename = $_SESSION["MemberLoginName"].$src_type;

大功告成！