PHP網(wǎng)站開(kāi)發(fā)項(xiàng)目式教程任務(wù)課件11

1、任務(wù)十一 復(fù)雜的附件添加與處理方法復(fù)雜的附件添加，是指在寫(xiě)郵件界面中，點(diǎn)擊文本“添加附件”后，在不顯示文件域元素的情況下，直接完成附件的添加，并且將已經(jīng)添加的附件的名稱(chēng)和大小信息顯示在寫(xiě)郵件界面中。11.1 設(shè)計(jì)“添加附件”頁(yè)面顯示在頁(yè)面中的“添加附件”文本實(shí)際上是一個(gè)獨(dú)立的頁(yè)面文件的內(nèi)容，頁(yè)面文件名稱(chēng)是up.php，該文件作為浮動(dòng)框架子頁(yè)面嵌入在writeemail.php文件中。在文件up.php中包含了兩部分的內(nèi)容：第一部分是設(shè)計(jì)選擇附件的界面；第二部分是附件文件的上傳與處理。11.1.1 選擇附件的界面設(shè)計(jì)為了方便控制文本“添加附件”和文件域元素的位置，需要將文件up.php的頁(yè)面邊距

2、定義為0。在文件up.php中需要兩個(gè)頁(yè)面元素，分別是文件域元素和“添加附件”文本。設(shè)計(jì)“添加附件”文本時(shí)，使用標(biāo)記定界，定義文本的樣式為：字號(hào)10pt，文本的行高20px，文本顏色為藍(lán)色，帶有下劃線。這里所說(shuō)的點(diǎn)擊文本“添加附件”實(shí)現(xiàn)附件的添加過(guò)程，在實(shí)際操作中點(diǎn)擊的是表單文件域元素的“瀏覽”按鈕；采用的做法是將“瀏覽”按鈕疊放在文字“添加附件”的前面，且被設(shè)計(jì)為透明效果，所以用戶(hù)看到的只有 “添加附件”文本，實(shí)現(xiàn)這種設(shè)計(jì)的關(guān)鍵是文件域元素的樣式定義。11.1.1 選擇附件的界面設(shè)計(jì)在up.php文件中插入表單，設(shè)計(jì)name和id是file1的文件域元素，使用id選擇符#file1定義文件域

3、元素的樣式，樣式要求如下：（1）高度是20px，與“添加附件”文本的行高一致；（2）使用濾鏡filter:alpha設(shè)置文件域元素的透明效果，在IE瀏覽器中要使用樣式代碼filter:alpha(opacity=0);設(shè)置，而在其它瀏覽器中則要使用樣式代碼opacity:0;設(shè)置，為了保證在各種瀏覽器中都起作用，這兩種樣式同時(shí)定義即可；11.1.1 選擇附件的界面設(shè)計(jì)（3）要做到文件域元素與“添加附件”文本的層疊顯示效果，需要將文件域元素進(jìn)行絕對(duì)定位，只有絕對(duì)定位的元素能夠放在其它元素的前面或后面，絕對(duì)定位之后，要保證定位在“添加附件”文本位置的正好是文件域元素中的“瀏覽”按鈕，所以定位時(shí)要將

4、文件域元素中的文本框部分向左移動(dòng)到瀏覽器窗口左邊框外側(cè)，保證“瀏覽”按鈕的位置與“添加附件”文本一致，使用絕對(duì)定位且橫坐標(biāo)為-160px進(jìn)行設(shè)置，縱坐標(biāo)設(shè)置為0即可，將z-index設(shè)置為2，保證將文件域元素顯示在文本“添加附件”的前面；（4）使用代碼cursor:pointer;將鼠標(biāo)指針設(shè)為手狀。11.1.2 表單界面內(nèi)容與數(shù)據(jù)處理功能的合并1.使用submit()方法提交表單數(shù)據(jù)在頁(yè)面up.php中點(diǎn)擊“添加附件”實(shí)現(xiàn)文件上傳時(shí)，需要使用表單的submit() 方法來(lái)提交數(shù)據(jù)。當(dāng)文件域元素的文本框內(nèi)容發(fā)生變化時(shí)，調(diào)用submit() 方法。用戶(hù)點(diǎn)擊“添加附件”文本選擇文件之后，在文件域元

5、素的文本框中會(huì)顯示文件的信息，這就意味著文本框的內(nèi)容發(fā)生了變化，此時(shí)會(huì)觸發(fā)文本框的change事件，因此只需要在文件域元素標(biāo)記內(nèi)部使用代碼onchange=document.表單名稱(chēng).submit();即可完成數(shù)據(jù)的提交。修改up.php文件代碼，在標(biāo)記內(nèi)部增加代碼onchange=document.form1.submit();實(shí)現(xiàn)數(shù)據(jù)上傳，此處的form1是表單標(biāo)記中 name屬性的取值。2.獲取并處理上傳的文件在up.php文件中同時(shí)包含了表單界面的設(shè)計(jì)和表單數(shù)據(jù)提交之后的處理功能，因此在數(shù)據(jù)提交之前要先判斷數(shù)據(jù)是否已經(jīng)提交，否則會(huì)出現(xiàn)代碼錯(cuò)誤。使用isset() 函數(shù)判斷數(shù)據(jù)是否已經(jīng)提

6、交，即判斷系統(tǒng)數(shù)組元素$_FILESfile1是否已經(jīng)被設(shè)置，若已經(jīng)設(shè)置，則說(shuō)明數(shù)據(jù)已經(jīng)提交，即可執(zhí)行數(shù)據(jù)處理部分的代碼。11.2 添加與刪除附件功能的實(shí)現(xiàn)添加附件，是指點(diǎn)擊“添加附件”文本，能夠?qū)⑸蟼鞯奈募畔@示在寫(xiě)郵件頁(yè)面中，同時(shí)還需要準(zhǔn)備好要傳遞給服務(wù)器保存在數(shù)據(jù)表emailmsg中的附件信息內(nèi)容。刪除附件，是指點(diǎn)擊“刪除”文本時(shí)，能夠?qū)?duì)應(yīng)的附件信息從寫(xiě)郵件頁(yè)面中刪除，同時(shí)要修改在添加附件時(shí)準(zhǔn)備好的、要上傳給服務(wù)器保存在數(shù)據(jù)表emailmsg中的附件信息，還要請(qǐng)求服務(wù)器刪除文件夾upload中的相應(yīng)文件。1.使用浮動(dòng)框架嵌入上傳附件頁(yè)面添加附件的頁(yè)面文件up.php需要使用浮動(dòng)框架嵌

7、入到頁(yè)面文件writeemail.php中，在writeemail.php表格的“主題”和 “內(nèi)容”之間增加一行，在右側(cè)單元格中插入浮動(dòng)框架，浮動(dòng)框架的設(shè)計(jì)要求如下：寬度100px，高度30px，沒(méi)有滾動(dòng)條，邊框設(shè)置為0，名稱(chēng)是upfile，初始狀態(tài)加載的頁(yè)面文件是up.php。2.接收上傳附件的元素設(shè)計(jì)（1）在頁(yè)面中增加接收附件名稱(chēng)和大小信息的文本框元素點(diǎn)擊“添加附件”上傳文件后，服務(wù)器端已經(jīng)接收并存儲(chǔ)了上傳的文件，但是，需要將上傳文件的名稱(chēng)大小等信息顯示在寫(xiě)郵件界面中，另外，發(fā)送郵件時(shí)，需要將所有附件以“(隨機(jī)數(shù))文件名稱(chēng)(大小);”這種格式連接在一起提交給服務(wù)器，存儲(chǔ)在郵件信息數(shù)據(jù)表em

8、ailmsg的attachment列中。為此，需要在writeemail.php文件中添加兩個(gè)隱藏的文本框，一個(gè)文本框id為attachmsg2，用于接收up.php文件上傳的當(dāng)前附件的名稱(chēng)和大小信息；一個(gè)文本框id為file，用于接收up.php文件已經(jīng)上傳的所有附件的“(隨機(jī)數(shù))文件名稱(chēng)(大小);”信息。文本框元素設(shè)計(jì)說(shuō)明為了能夠觀察到效果，臨時(shí)將兩個(gè)文本框都設(shè)置為顯示狀態(tài)，添加三個(gè)附件后，兩個(gè)文本框及附件信息顯示效果如圖所示?！爸黝}”文本框下面第一個(gè)文本框id是attachmsg2，只顯示最后添加的附件的名稱(chēng)和大小信息；第二個(gè)文本框id是file，按順序顯示三個(gè)附件的相關(guān)信息。（2）為文

9、本框傳遞數(shù)據(jù)修改up.php文件代碼，在move_uploaded_file($ftmpname,upload/$name1);之后添加代碼，將上傳附件的名稱(chēng)大小等信息傳遞到頁(yè)面文件writeemail.php的兩個(gè)文本框元素中（3）用于顯示附件信息的元素設(shè)計(jì)每上傳一個(gè)附件之后，需要將writeemail.php頁(yè)面中id=attachmsg2的文本框元素的內(nèi)容獲取出來(lái)，在前面增加附件圖標(biāo)，后面增加“刪除”文本之后，以圖11-2中的效果顯示在頁(yè)面中。因?yàn)楦郊D標(biāo)和“刪除”文本需要在所有的附件中使用，因此在添加附件之前先準(zhǔn)備好這兩個(gè)元素，兩個(gè)元素初始狀態(tài)都是隱藏，id分別為attachflag和

10、delete，點(diǎn)擊“添加附件”時(shí)，分別復(fù)制這兩個(gè)元素作為段落元素的子元素。11.2.2 添加段落節(jié)點(diǎn)顯示附件信息要顯示在writeemail.php頁(yè)面中的所有附件信息都需要使用段落標(biāo)記控制，之后將段落元素作為元素的子元素添加到頁(yè)面中，項(xiàng)目中使用腳本函數(shù)appendattachment() 實(shí)現(xiàn)這一功能。11.2.3 刪除附件刪除附件時(shí)需要完成兩個(gè)部分的功能，第一，刪除圖11-2中寫(xiě)郵件界面內(nèi)顯示的附件信息；第二，要?jiǎng)h除保存在upload文件夾下的附件文件。刪除寫(xiě)郵件界面中的附件信息，需要定義腳本函數(shù)完成；刪除upload文件夾中的附件文件，需要使用Ajax完成瀏覽器與服務(wù)器的交互，最終實(shí)現(xiàn)服務(wù)器端的文件刪除操作。刪除附件操作，需要定義的腳本函數(shù)有兩個(gè)：函數(shù)createXML()，用于創(chuàng)建對(duì)象XMLHttpRequest的實(shí)例；函數(shù)dele(