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

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

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

用于添加附件的頁面效果

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

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

添加附件之后的界面效果任務11-1設計“添加附件”頁面

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

顯示在頁面中的“添加附件”實際上是一個獨立的頁面文件的內容，頁面文件名稱是up.php，該文件作為浮動框架子頁面被嵌入writeemail.php文件。

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

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

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

設計“添加附件”文本元素時，使用<span>…</span>標簽進行定界，定義文本的樣式為：字號為10pt，文本的行高為20px，文本顏色為藍色，帶下畫線。

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

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

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

修改up.php文件代碼，在<inputname="file1"type="file"id="file1"/>標簽內部增加代碼onchange="document.form1.

submit();"實現(xiàn)數(shù)據(jù)上傳，此處的form1是表單<form>標簽中name屬性的取值。2．獲取并處理上傳的文件

在up.php文件中同時包含表單界面的設計代碼和表單數(shù)據(jù)提交之后的處理功能代碼，因此在數(shù)據(jù)提交之前要先判斷數(shù)據(jù)是否已經(jīng)提交，否則會出現(xiàn)代碼錯誤。

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

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

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

對于添加附件的頁面文件up.php，需要使用浮動框架將其嵌入頁面文件writeemail.php，在writeemail.php表格的“主題”和“內容”之間增加一行，在右側單元格中插入浮動框架。浮動框架的設計要求如下。

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

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

兩個文本框及附件信息的顯示效果

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

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

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

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

"upload/$name1");之后添加代碼，將上傳附件的名稱和大小等信息傳遞到頁面文件writeemail.php的兩個文本框元素中。（3）用于顯示附件信息的元素設計。

每上傳一個附件之后，需要將writeemail.php頁面中id="

attachmsg2"的文本框元素的內容獲取出來，在其前面增加附件圖標，在其后面增加“刪除”文本元素之后，以圖11-2中的效果顯示在頁面中。

因為附件圖標和“刪除”文本元素需要在所有附件中使用，所以在添加附件之前應先準備好這兩個元素，這兩個元素初始狀態(tài)都是隱藏的，id分別為attachflag和delete。當用戶單擊“添加附件”時，分別復制這兩個元素作為段落元素的子元素。

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

attachment">因為初始高度為auto，且沒有內容，所以不能顯示，其余4個元素的效果如圖11-4所示。圖11-4

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

顯示在writeemail.php頁面中的所有附件信息都需要使用段落標簽來進行控制，之后將段落元素作為元素<divid="

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

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

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

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

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

對于所保留的分號的作用，下面舉例說明。假設用戶上傳的附件有3個，效果如圖11-5所示。圖11-5

上傳的3個附件的顯示效果

在圖11-5中，第1個附件微課錄制.txt對應的“刪除”文本元素name取值中的序號為1，第2個附件修改提示.txt對應的“刪除”文本元素name取值中的序號為2，第3個附件PHP面向對象.docx對應的“刪除”文本元素name取值中的序號為3。

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

刪除一個附件之后的顯示效果

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

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

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