FileUploader ASP.NET User Guide [zh, en]

StudyHost

FileUploader Control 使用說明

P. 1

在 ASP.NET 應用程式中使用方式

1. 在瀏覽器中鍵入網址『http://codestorage.ria101.com.tw/CodeStorageRIAUser.html?CodeUid=87』以下

載檔案 (若您不是會員，請先建立帳號)：

2. 建立 ASP.NET Web 應用程式：

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 2

3. 在專案的 Reference 資料夾下，按右鍵並點選 Add Reference：

引用位於 Binaries 資料夾底下的 UploadService.dll

4. 在專案中建立 Web Service：

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 3

public class FileReceiver : System.Web.Services.WebService
{

[WebMethod]
public string HelloWorld()
{
return "Hello World";
}
}

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]

public class FileReceiver : StudyHost.Web.Services.FileUploadServiceBase
{
[WebMethod]
public string HelloWorld()
{
return "Hello World";
}

1. 開啟 Web Service(.asmx)的 Code Behide 程式碼(xxxx.cs)，將

System.Web.Services.WebService 刪除：

2. 修改為繼承自 StudyHost.Web.Services.FileUploadServiceBase：

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 4

}

3. 儲存後，ReBuild 整個專案，並點選.asmx 按下滑鼠右鍵，選擇 View In Browser：

5. 在顯示出的 Browser 中，確認是否有成功建立出 UploadFile 與 Login 兩個 Web

Method：

6. 確認無誤後，取得該.asmx 的網址(請注意，此為開發測試環境之 URL 位置，

Production 時該網址必須換成正式機的.asmx URL 位置)：

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 5

7. 在 ASP.NET 專案中加入 ClientBin 資料夾：

8. 複製 Binaries\ClientBin 資料夾下的 FileUpload.xap 檔案到 ASP.NET 專案的

ClientBin 資料夾中。

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 6

<object data="data:application/x-silverlight-2,"

type="application/x-silverlight-2" width="350px" height="100px">
<param name="source" value="ClientBin/FileUpload.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50401.0" />
<param name="autoUpgrade" value="true" />
<param name="initParams" value="ServiceURL=請務必填入您的FileReceiver服務位

置.asmx, MaxFileSize=10000000,AutoUploadWhenDrop=true,
ShowOpenFileDialogButton=true, HiddenFieldID=HiddenField1" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>

</object>

<param name="initParams" value="ServiceURL=
http://localhost:60648/FileUploaderTest/FileReceiver.asmx,
MaxFileSize=10000000,AutoUploadWhenDrop=true, ShowOpenFileDialogButton=true" />

9. 開啟需要拖曳上傳檔案的.aspx 頁面，在頁面中加入底下 HTML Code(可參考

Binaries 資料夾底下的 EmbeddedFileUploadHTMLCode.html)：

10. 將務必留意，將剛才步驟 5 中所複製的 URL，填入 ServiceURL 參數中(請注意，

此為開發測試環境之 URL 位置，Production 時該網址必須換成正式機的.asmx
URL 位置)：

11. 若您需要在 ASP.NET 的 Postback 動作中，取得上傳檔案的名稱與路徑，可在

http://www.StudyHost.Com

StudyHost

FileUploader Control 使用說明

P. 7

名稱

描述

ServiceURL

設定上傳服務(.asmx)位置(URL), 此屬性不得為空白

MaxFileSize

檔案上傳長度限制

AutoUploadWhenDrop

設定是否支援拖曳自動上傳

ShowOpenFileDialogButton

是否顯示開檔對話視窗按鈕

HiddenFieldID

ASP.NET 頁面上的隱藏欄位 ID。若您需要在 ASP.NET
的 Postback 動作後，取得上傳檔案的名稱與路徑，
您可以在 ASP.NET 頁面上加入一個隱藏欄位

(HiddenField 物件)，並透過這個參數將該欄位名稱
(ClientID)傳入，FileUploader 控制項將會在順利上傳
檔案後，把檔案路徑寫入此 Hidden Field。

ASP.NET 頁面上加入一個名稱的 HiddenField1 隱藏欄位(HiddenField 物件)。

12. 完成後重新建置(rebuild)此網站，即可在.aspx 頁面中測試上傳功能。

您可以在 ASP.NET 的 Postback 事件當中，透過隱藏欄位 HiddenField1 取得上傳的檔
案名稱，並透過自行撰寫其他的 Web Method 或 ASP.NET 程式碼將上傳後的檔案
進行後續的其他處理。

<Object>…<Object>中的 initParams，可使用的參數如下：

http://www.StudyHost.Com