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

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

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

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

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

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

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

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

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

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

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