第 2.2 課：使用檔案上載元件

請利用這一課來瞭解如何讓使用者上載分類廣告的圖片。在 new_record.jsp 和 update_record.jsp 頁面上，這個功能尤其重要。檔案上載元件可讓使用者瀏覽他們的檔案系統、將檔案上載到資料庫，以及立即在資料庫中顯示這個檔案。

執行這項作業的原因和時機

由於使用檔案上載元件的程序與建立和更新的情況相似，因此，這個練習可讓更新頁面變更任何清單的現有影像。如果您想要的話，您可以在更新頁面完成時，在新記錄頁面上進行相同的變更。

將近期照片新增至頁面

執行這項作業的原因和時機

您會發現更新表單只是含有靜態文字的 HTML 表格，只是將輸入元件連結至 update_record 關聯式記錄的直欄。瞭解這一點之後，您就可以如同修改任何 HTML 表格一樣，新增列和直欄來修改表單。在下列步驟中，您將新增新的列來顯示現行照片。

在顯示關聯式記錄清單的資料表中，新增列和直欄比較複雜。如需將直欄新增至資料表的相關資訊，請參閱第 1.2 課：連接資料庫和在網頁上顯示資料。

在「企業瀏覽器」視圖中，按兩下 update_record.jsp 頁面。
將游標放在表格的第一個（左上角）資料格。這個資料格的標籤是 ID。
從主功能表中，按一下表格 > 指定和新增。這時會開啟「新增列或直欄」對話框。按一下列，再按一下在選取的儲存格上方。表格頂端將新建一列，內含記錄的近期照片。按一下確定。
在這個新列左邊資料格中，輸入近期照片：做為標籤。
從選用區的 Faces 元件抽屜中，將影像元件拖曳至新列最右側的資料格中。和上一個練習不同，您將允許使用者在沒有大小限制的情況下查看完整影像，因此，您不會變更「內容」視圖的寬度和高度。
從「頁面資料」視圖中，將 PHOTO 直欄拖曳至新圖形元件，讓圖形元件連結至 update_record 的 PHOTO 直欄。圖形元件現在已連結至資料庫的 PHOTO 直欄。
在選定圖形的情況下，跳至「內容」視圖，按一下「類型」欄位旁的「選取頁面資料物件」按鈕。這時會開啟「選取頁面資料物件」視窗。
按一下 update_record（服務資料物件） > update_record (ADS) > IMAGETYPE (String)。
按一下確定。頁面現在會顯示分類廣告的近期照片（如果有的話）。頁面如下所示：

執行這項作業的原因和時機

之後，新增一列至表格底端來包含檔案上載元件。

按一下最後一列，讓游標移至此列。
從功能表列中，按一下表格 > 在下面新增一列。
在新列的第一個資料格中，輸入新照片：作為標籤。
從「選用區」的「加強型 Faces 元件」抽屜中，將檔案上載元件拖曳至新列的最後一個資料格。
同樣地，就像連結圖形元件一樣，將檔案上載元件連結至 update_record 關聯式記錄的 PHOTO 直欄。這時文字欄位會顯示 {PHOTO}，表示這個元件已連結至 PHOTO 直欄，且上載的檔案會放在這個直欄中。頁面如下所示：
將頁面儲存起來，如果您想要的話，請加以測試。

您已完成第 2.2 課。在這一課，您已學到如何操作更新頁面上的表格、將近期照片新增至表格，以及將檔案上載元件新增至表格。