PHP網(wǎng)站開發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)11 添加附件的復(fù)雜方法設(shè)計(jì)

PHP網(wǎng)站開發(fā)項(xiàng)目式教程（微課版）（第2版）任務(wù)11添加附件的復(fù)雜方法設(shè)計(jì)

添加附件的復(fù)雜方法是指在寫郵件界面中，當(dāng)用戶單擊“添加附件”后，在不顯示文件域元素的情況下，直接完成附件的添加，并將已經(jīng)添加的附件的名稱和大小信息顯示在寫郵件界面中。用于添加附件的頁(yè)面效果如圖11-1所示。圖11-1

用于添加附件的頁(yè)面效果

單擊圖11-1中的“添加附件”可打開選擇文件的界面，選擇附件文件之后，系統(tǒng)直接將附件文件保存到服務(wù)器端指定的文件夾中，并在進(jìn)行處理之后將附件的名稱和大小等信息顯示在寫郵件界面中，效果如圖11-2所示。

圖11-2中顯示的附件名稱后面同時(shí)顯示了附件的大小信息，單擊右側(cè)的“刪除”，可以刪除附件。圖11-2

添加附件之后的界面效果任務(wù)11-1設(shè)計(jì)“添加附件”頁(yè)面

需要解決的核心問(wèn)題單擊圖11-1中的“添加附件”，會(huì)彈出選擇文件的界面，“添加附件”文本元素需要以怎樣的形式添加到寫郵件界面中？當(dāng)表單中沒(méi)有“提交”按鈕時(shí)，如何使用submit()方法在指定操作完成之后向服務(wù)器提交數(shù)據(jù)？

顯示在頁(yè)面中的“添加附件”實(shí)際上是一個(gè)獨(dú)立的頁(yè)面文件的內(nèi)容，頁(yè)面文件名稱是up.php，該文件作為浮動(dòng)框架子頁(yè)面被嵌入writeemail.php文件。

文件up.php涉及兩部分的內(nèi)容：第一部分是設(shè)計(jì)選擇附件界面；第二部分是附件文件的上傳與處理。11.1.1選擇附件界面的設(shè)計(jì)1．界面設(shè)計(jì)要求

為了方便控制文本元素“添加附件”和文件域元素的位置，需要將文件up.php的頁(yè)面邊距定義為0。

在文件up.php中需要有兩個(gè)頁(yè)面元素，分別是文件域元素和“添加附件”文本元素。

設(shè)計(jì)“添加附件”文本元素時(shí)，使用<span>…</span>標(biāo)簽進(jìn)行定界，定義文本的樣式為：字號(hào)為10pt，文本的行高為20px，文本顏色為藍(lán)色，帶下畫線。

在up.php文件中插入表單，設(shè)計(jì)name和id是file1的文件域元素，使用ID選擇符#file1定義文件域元素的樣式，樣式要求如下。（1）高度是20px，與“添加附件”文本元素的行高一致。（2）使用“濾鏡”filter:alpha設(shè)置文件域元素的透明效果，在IE中要使用樣式代碼filter:alpha(opacity=0);進(jìn)行設(shè)置，在其他瀏覽器中則要使用樣式代碼opacity:0;進(jìn)行設(shè)置。為了保證在各種瀏覽器中都起作用，可同時(shí)定義這兩種樣式。（3）要實(shí)現(xiàn)文件域元素與“添加附件”文本元素的層疊顯示效果，需要將文件域元素進(jìn)行絕對(duì)定位，只有絕對(duì)定位的元素才能夠放在其他元素的前面或后面。進(jìn)行絕對(duì)定位之后，要保證定位在“添加附件”位置的正好是文件域元素中的“瀏覽”按鈕，所以定位時(shí)，要將文件域元素中的文本框部分向左移動(dòng)到瀏覽器窗口左邊框外側(cè)，保證“瀏覽”按鈕的位置與“添加附件”的位置一致。使用絕對(duì)定位且橫坐標(biāo)為160px，縱坐標(biāo)設(shè)置為0即可，將z-index設(shè)置為2，保證將文件域元素顯示在“添加附件”的前面。（4）使用代碼cursor:pointer;將鼠標(biāo)指針設(shè)為手狀。2．樣式代碼與頁(yè)面元素代碼（1）內(nèi)嵌樣式代碼（2）頁(yè)面元素代碼11.1.2表單界面內(nèi)容與數(shù)據(jù)處理功能的合并1．使用submit()方法提交表單數(shù)據(jù)

在up.php頁(yè)面中實(shí)現(xiàn)當(dāng)用戶單擊“添加附件”實(shí)現(xiàn)文件上傳時(shí)，需要使用表單的submit()方法來(lái)提交數(shù)據(jù)。

當(dāng)文件域元素的文本框內(nèi)容發(fā)生變化時(shí)，系統(tǒng)會(huì)調(diào)用submit()方法。用戶單擊“添加附件”并選擇文件之后，文件域元素的文本框中會(huì)顯示文件的信息，這就意味著文本框的內(nèi)容發(fā)生了變化，此時(shí)會(huì)觸發(fā)文本框的change事件。因此只需要在文件域元素標(biāo)簽內(nèi)部使用代碼onchange="document.表單名稱.submit();"即可完成數(shù)據(jù)的提交。

修改up.php文件代碼，在<inputname="file1"type="file"id="file1"/>標(biāo)簽內(nèi)部增加代碼onchange="document.form1.

submit();"實(shí)現(xiàn)數(shù)據(jù)上傳，此處的form1是表單<form>標(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)提交，即判斷系統(tǒng)數(shù)組元素$_FILES['file1']是否已經(jīng)設(shè)置，若已經(jīng)設(shè)置，則說(shuō)明數(shù)據(jù)已經(jīng)提交，可執(zhí)行數(shù)據(jù)處理部分的代碼。任務(wù)11-2添加與刪除附件功能的實(shí)現(xiàn)需要解決的核心問(wèn)題用來(lái)上傳附件的up.php文件應(yīng)如何加載到寫郵件頁(yè)面中？寫郵件頁(yè)面中設(shè)計(jì)了幾個(gè)接收上傳附件信息的文本框？它們各自的作用是什么？在up.php頁(yè)面中上傳的附件信息怎樣傳送給寫郵件頁(yè)面中的文本框？如何在上傳的附件信息前面增加附件圖標(biāo)，在其后面增加“刪除”文本元素，之后顯示在寫郵件頁(yè)面中？刪除附件時(shí)，如何去掉寫郵件頁(yè)面中的帶有附件圖標(biāo)和“刪除”文本元素的附件信息？如何修改存放所有附件信息的文本框的內(nèi)容？如何使用AJAX技術(shù)請(qǐng)求服務(wù)器刪除upload文件夾中的相應(yīng)文件？

添加附件，是指當(dāng)用戶單擊“添加附件”后，系統(tǒng)將上傳的文件信息顯示在寫郵件頁(yè)面中，同時(shí)準(zhǔn)備好要傳遞給服務(wù)器的保存在數(shù)據(jù)表emailmsg中的附件信息內(nèi)容。

刪除附件，是指當(dāng)用戶單擊“刪除”后，系統(tǒng)將對(duì)應(yīng)的附件信息從寫郵件頁(yè)面中刪除，同時(shí)修改在添加附件時(shí)準(zhǔn)備好的要上傳給服務(wù)器的保存在數(shù)據(jù)表emailmsg中的附件信息，還要請(qǐng)求服務(wù)器刪除文件夾upload中的相應(yīng)文件。11.2.1界面設(shè)計(jì)1．使用浮動(dòng)框架嵌入上傳附件頁(yè)面

對(duì)于添加附件的頁(yè)面文件up.php，需要使用浮動(dòng)框架將其嵌入頁(yè)面文件writeemail.php，在writeemail.php表格的“主題”和“內(nèi)容”之間增加一行，在右側(cè)單元格中插入浮動(dòng)框架。浮動(dòng)框架的設(shè)計(jì)要求如下。

寬度為100px，高度為30px，沒(méi)有滾動(dòng)條，邊框?yàn)?，名稱為upfile，初始狀態(tài)加載的頁(yè)面文件是up.php。2．設(shè)計(jì)接收上傳附件的元素（1）在頁(yè)面中增加接收附件名稱和大小信息的文本框元素。

為了能夠觀察到效果，臨時(shí)將兩個(gè)文本框都設(shè)置為顯示狀態(tài)，添加3個(gè)附件后，兩個(gè)文本框及附件信息的顯示效果如圖11-3所示。圖11-3

兩個(gè)文本框及附件信息的顯示效果

在圖11-3中，“主題”文本框下面的第一個(gè)文本框的id是attachmsg2，只顯示最后添加的附件的名稱和大小信息；第二個(gè)文本框的id是file，內(nèi)部會(huì)按順序顯示3個(gè)附件的相關(guān)信息。

添加兩個(gè)文本框，需要分別定義樣式代碼和頁(yè)面元素代碼。在樣式文件writeemail.css中增加代碼#attachmsg2,#file

{display:none;}。（2）為文本框傳遞數(shù)據(jù)。

修改up.php文件代碼，在move_uploaded_file($ftmpname,

"upload/$name1");之后添加代碼，將上傳附件的名稱和大小等信息傳遞到頁(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)和“刪除”文本元素需要在所有附件中使用，所以在添加附件之前應(yīng)先準(zhǔn)備好這兩個(gè)元素，這兩個(gè)元素初始狀態(tài)都是隱藏的，id分別為attachflag和delete。當(dāng)用戶單擊“添加附件”時(shí)，分別復(fù)制這兩個(gè)元素作為段落元素的子元素。

在writeemail.php頁(yè)面的“添加附件”前后增加的元素一共有5個(gè)，臨時(shí)將這5個(gè)元素都設(shè)置為顯示狀態(tài)，其中<divid="

attachment">因?yàn)槌跏几叨葹閍uto，且沒(méi)有內(nèi)容，所以不能顯示，其余4個(gè)元素的效果如圖11-4所示。圖11-4

為處理附件準(zhǔn)備的部分元素的效果11.2.2添加段落節(jié)點(diǎn)顯示附件信息

顯示在writeemail.php頁(yè)面中的所有附件信息都需要使用段落標(biāo)簽來(lái)進(jìn)行控制，之后將段落元素作為元素<divid="

attachment">的子元素添加到頁(yè)面中，項(xiàng)目中會(huì)使用腳本函數(shù)appendattachment()實(shí)現(xiàn)這一功能。11.2.3刪除附件

刪除附件時(shí)需要實(shí)現(xiàn)兩個(gè)功能，第一，刪除圖11-2中寫郵件頁(yè)面內(nèi)顯示的附件信息；第二，刪除保存在upload文件夾中的附件文件。

刪除寫郵件頁(yè)面中的附件信息，需要定義腳本函數(shù)完成；刪除upload文件夾中的附件文件，需要使用AJAX完成瀏覽器與服務(wù)器的交互，最終實(shí)現(xiàn)服務(wù)器端文件的刪除操作。

刪除附件操作需要定義的腳本函數(shù)有兩個(gè)：一是函數(shù)createXML()，用于創(chuàng)建對(duì)象XMLHttpRequest的實(shí)例；二是函數(shù)dele()，用于刪除寫郵件頁(yè)面中的附件信息，刪除id="file"的文本框中相應(yīng)附件的“(隨機(jī)數(shù))文件名(大小);”格式的信息，通過(guò)AJAX向服務(wù)器端發(fā)出請(qǐng)求，提交要?jiǎng)h除文件的“(隨機(jī)數(shù))文件名”格式的信息。

除了定義腳本函數(shù)，還需要定義一個(gè)PHP文件，用于接收文件名稱并刪除附件文件，項(xiàng)目中定義的文件是delefujian.php。1．創(chuàng)建函數(shù)createXML()2．創(chuàng)建函數(shù)dele()

對(duì)于所保留的分號(hào)的作用，下面舉例說(shuō)明。假設(shè)用戶上傳的附件有3個(gè)，效果如圖11-5所示。圖11-5

上傳的3個(gè)附件的顯示效果

在圖11-5中，第1個(gè)附件微課錄制.txt對(duì)應(yīng)的“刪除”文本元素name取值中的序號(hào)為1，第2個(gè)附件修改提示.txt對(duì)應(yīng)的“刪除”文本元素name取值中的序號(hào)為2，第3個(gè)附件PHP面向?qū)ο?docx對(duì)應(yīng)的“刪除”文本元素name取值中的序號(hào)為3。

刪除附件修改提示.txt之后，圖11-5的效果變?yōu)閳D11-6所示的效果。圖11-6

刪除一個(gè)附件之后的顯示效果

在圖11-6中，附件微課錄制.txt對(duì)應(yīng)的“刪除”文本元素name取值中的序號(hào)為1，附件PHP面向?qū)ο?docx對(duì)應(yīng)的“刪除”文本元素name取值中的序號(hào)為3。3．創(chuàng)建服務(wù)器端文件delefujian．php任務(wù)11-3修改storeemail.php文件

在11.2節(jié)中使用的添加附件的方案中，所有附件的信息都以“(隨機(jī)數(shù))文件名(大小);”格式連接在一起放在id="file"的文本框中，發(fā)送郵件時(shí)，這些附件的信息會(huì)作為完整的數(shù)據(jù)提交給服務(wù)器。因此，需要修改在任務(wù)7中創(chuàng)建的文件storeemail.

php的代碼，完成附件信息的