練習 2.3:使用檔案上載元件
開始之前,您必須先完成練習 2.2:格式化資料表。
假如您正在顯示 PHOTO 直欄,您應該提供使用者上載分類廣告圖片的能力。
在 new_record.jsp 和 update_record.jsp 頁面上,這個功能尤其重要。
檔案上載元件可讓使用者瀏覽他們的檔案系統、將檔案上載到資料庫,以及立即在資料庫中顯示這個檔案。
由於使用檔案上載元件的程序與建立和更新的情況相似,因此,這個練習可讓更新頁面變更任何清單的現有影像。
如果您想要的話,您可以在更新頁面完成時,在新記錄頁面上進行相同的變更。
將現行照片新增至頁面中
您會發現更新表單與含有一些靜態文字和一些連結至 update_record 關聯式記錄直欄的輸入元件之 HTML 表格沒有什麼不同。
瞭解這一點之後,您就可以如同修改任何 HTML 表格一樣,新增列和直欄來修改表單。在下列步驟中,您將新增新的列來顯示現行照片。
在顯示關聯式記錄清單的資料表中,新增列和直欄比較複雜。
如果需要新增直欄到資料表的相關資訊,請參閱練習 1.2:使用關聯式記錄清單和資料表元件中的調整預設資料表。
- 在「專案瀏覽器」視圖中,按兩下 update_record.jsp 頁面。
- 將游標放在表格的第一個(左上角)資料格。這個資料格的標籤是 ID。
- 從功能表列中,按一下表格 > 新增列 > 加上在面,在即將包含記錄現行照片的表格頂端建立新的一列。
- 在這個新列最左側的資料格中,輸入現行照片:來作為標籤。
- 從選用區的 Faces 元件抽屜中,將影像元件拖曳至新列最右側的資料格中。
和上一個練習不同,您將允許使用者在沒有大小限制的情況下查看完整影像,因此,您不會變更「內容」視圖的寬度和高度。
- 將「頁面資料」視圖中的 PHOTO 直欄拖曳至新影像元件,以將影像元件連結至 update_record 的 PHOTO 直欄。
影像元件現在會連結至資料庫的 PHOTO 直欄。
- 在「內容」視圖中,按一下類型欄位旁的選取頁面資料物件
按鈕。
這時會開啟「選取頁面資料物件」視窗。
- 按一下 + 號來展開 update_record 關聯式記錄。
- 按一下 IMAGETYPE (String)。
- 按一下確定。
現在,如果有分類廣告的現行照片的話,頁面會顯示它。
您的頁面應該看起來如下:

將檔案上載元件新增至頁面中
之後,新增一列至表格底端來包含檔案上載元件。
- 按一下包含「照片:」文字的資料格,以將游標放在最後一列中。
- 從功能表列中,按一下表格 > 新增列 > 加在下面。
- 在新列的第一個資料格中,輸入新照片:作為標籤。
- 從選用區的 Faces 元件抽屜中,將檔案上載元件拖曳至新列的最後一個資料格中。
- 依照連結影像元件的相同方式,將檔案上載元件連結到 update_record 關聯式記錄的 PHOTO 直欄。
這時文字欄位會顯示 {PHOTO},表示這個元件已連結至 PHOTO 直欄,且上載的檔案會放在這個直欄中。
您的頁面應該看起來如下:

- 將頁面儲存起來,如果您想要的話,請加以測試。
現在您已準備好開始進行練習 2.4:使用導覽規則。