讓我們來試試看將本機電腦上的檔案上傳至伺服器。同時, 預設為禁止上傳同名的檔案。

本次實作範例的執行畫面

將指定的檔案上傳至伺服器

操作步驟

Step 1 建立新的程式碼

請在Visual Web Developer中建立新網站。並在方案總管中新網站的資料夾上按一下右鍵, 在右鍵選單中選擇 [加入新項目]。在 [加入新項目] 對話框中依照下表輸入新增檔案的資訊。輸入完成後, 按一下 [加入] 按鈕。

[加入新項目] 對話框的輸入資訊
　

Step 2 設計網頁配置

在文件視窗中FileUpload.aspx是開在 [原始檔] 模式, 所以要選擇視窗下面的 [設計] 索引標籤。打開的會是空白的設計視窗, 請依照下圖的要領在網頁上放置伺服器控制項。

Step 3 設定伺服器控制項的屬性資訊

接著來設定已配置在網頁上的伺服器控制項的屬性資訊 (外觀及行為) 。要設定屬性, 可以在畫面右下角的屬性視窗進行。在文件視窗中, 選擇想要設定屬性的伺服器控制項之後, [屬性] 視窗就會顯示該控制項的屬性資訊, 請依照下表輸入屬性資訊：

FileUpload.aspx的屬性資訊
　

RadioButtonList控制項的選項請從 [ListItem集合編輯器] 來編輯。按一下屬性視窗的Items屬性右邊的?icon_dots 按鈕, 就可以開啟 [ListItem集合編輯器] 對話框。要加入 / 移除項目, 請按左下角的 [加入] / [移除] 按鈕；要調換項目的順序, 請按 ?icon_up ?icon_down 按鈕。各別項目的屬性, 可以從右邊的屬性清單來做設定。在這裡請依照表中的內容, 加入 [允許] / [禁止] 的選項。

[ListItem集合編輯器] 對話框

Step 4 撰寫事件程序

接下來要撰寫當 [上傳] 按鈕 (Button控制項) 被按下去時所要執行的程式碼。在文件視窗中按兩下 [上傳] 按鈕, 程式碼編輯器就會打開。

在程式碼編輯器上, 會有預設自動產生的程式碼。請試著依照下面輸入程式碼看看。粗體的部份就是要自己新增輸入的地方。

程式碼 FileUpload.aspx

Step 5 執行程式碼, 確認動作

以上的程式碼輸入完成之後, 按一下工具列的 ?icon_debug (開始偵錯) 。程式開發伺服器和瀏覽器會啟動, 請在用來輸入檔案名稱的方塊中指定一個 「.gif」 檔, 如果顯示像本文開頭的結果就成功了 (*1) 。

另外, 上傳的檔案會儲存在應用程式根目錄底下的 「App_Data/doc」 資料夾中, 請確認 (*2) 。

*1：本範例中, 當 「App_Data/doc」 資料夾不存在時會發生錯誤。錯誤發生時, 請再次確認資料夾是否已經建立。

*2：本堂課的範例中, 是將上傳的圖檔複製到檔案系統中, 如果要儲存到資料庫也可以。