如果要將檔案上傳到伺服器,請先呼叫
browse()
方法,讓使用者可以選取一個或多個要上傳的檔案。然後,呼叫
FileReference.upload()
方法時,就會將選取的檔案傳輸到伺服器。如果使用者使用
FileReferenceList.browse()
方法選取多個檔案,Flash Player 就會建立包含所選取檔案的陣列,並命名為
FileReferenceList.fileList
。然後,您就可以使用
FileReference.upload()
方法分別上傳每一個檔案。
備註:
FileReference.browse()
方法只能讓您上傳單一檔案。若要讓使用者可以上傳多個檔案,請使用
FileReferenceList.browse()
方法。
根據預設,系統檔案挑選器對話方塊可以讓使用者從本機電腦挑選任何類型的檔案。開發人員可以使用 FileFilter 類別,並將檔案篩選實體的陣列傳遞給
browse()
方法,以指定一或多個自訂檔案類型篩選:
var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);
當使用者選取檔案,然後按一下系統檔案挑選器中的「開啟」按鈕後,就會送出
Event.SELECT
事件。如果已經使用
FileReference.browse()
方法選取要上傳的檔案,下列程式碼會將檔案傳送至網站伺服器:
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
try
{
var success:Boolean = fileRef.browse();
}
catch (error:Error)
{
trace("Unable to browse for files.");
}
function selectHandler(event:Event):void
{
var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm")
try
{
fileRef.upload(request);
}
catch (error:Error)
{
trace("Unable to upload file.");
}
}
function completeHandler(event:Event):void
{
trace("uploaded");
}
使用
FileReference.upload()
方法將資料傳送到伺服器時,您可以利用
URLRequest.method
和
URLRequest.data
屬性,以便使用
POST
或
GET
方法來傳送變數。
當您嘗試使用
FileReference.upload()
方法上傳檔案時,會傳送下列事件:
-
open
事件 (
Event.OPEN
):在上傳作業開始時傳送。
-
progress
事件 (
ProgressEvent.PROGRESS
):在上傳檔案的資料位元組時定期傳送。
-
complete
事件 (
Event.COMPLETE
):在上傳作業順利完成時傳送。
-
httpStatus
事件 (
HTTPStatusEvent.HTTP_STATUS
):在上傳程序因為 HTTP 錯誤而失敗時傳送。
-
httpResponseStatus
事件 (
HTTPStatusEvent.HTTP_RESPONSE_STATUS
):當
upload()
或
uploadUnencoded()
方法呼叫嘗試透過 HTTP 存取資料,而且 Adobe AIR 能夠偵測並傳回要求的狀態碼時傳送。
-
securityError
事件 (
SecurityErrorEvent.SECURITY_ERROR
):在上傳作業因為安全性違規而失敗時傳送。
-
uploadCompleteData
事件 (
DataEvent.UPLOAD_COMPLETE_DATA
):在已經順利上傳並從伺服器接收資料以後傳送。
-
ioError
事件 (
IOErrorEvent.IO_ERROR
):在上傳程序因為下列任一原因而失敗時傳送:
-
Flash Player 讀取、寫入或傳送檔案時發生輸入/輸出錯誤。
-
SWF 嘗試將檔案上傳至需要驗證 (如使用者名稱和密碼) 的伺服器。上傳期間,Flash Player 沒有提供讓使用者輸入密碼的工具。
-
url
參數的值包含無效的通訊協定。
FileReference.upload()
方法必須使用 HTTP 或 HTTPS。
Flash Player 並不完全支援需要驗證的伺服器。只有在使用瀏覽器外掛程式或 Microsoft ActiveX® 控制項之瀏覽器中執行的 SWF 檔,才能提供對話方塊,以提示使用者輸入使用者名稱和密碼進行驗證,而且只能下載檔案。如果使用外掛程式或 ActiveX 控制項上傳檔案,或是使用獨立或外部播放程式進行上傳/下載作業,則檔案傳輸會失敗。
若要在 ColdFusion 中建立伺服器指令碼,以接受透過 Flash Player 上傳的檔案,您可以參考下列程式碼:
<cffile action="upload" filefield="Filedata" destination="#ExpandPath('./')#" nameconflict="OVERWRITE" />
這段 ColdFusion 程式碼會上傳由 Flash Player 送出的檔案,並將它儲存在 ColdFusion 範本所在的相同目錄中,而且會覆寫任何具有相同名稱的檔案。上一段程式碼使用的程式碼行數是接受檔案上傳所需的最少行數,因此這段指令碼不可以用於正式的執行環境。最理想的方式是加入資料驗證功能,以確保使用者只能上傳可接受的檔案類型 (如影像檔案),而不使用具有潛在危險的伺服器端指令碼。
下列程式碼將示範如何使用 PHP 進行檔案上傳作業,其中也包括資料驗證。這段指令碼會將上傳目錄中可上傳的檔案數量限制為 10,並確保檔案大小少於 200 KB,而且限制只能上傳 JPEG、GIF 或 PNG 檔案並儲存到檔案系統。
<?php
$MAXIMUM_FILESIZE = 1024 * 200; // 200KB
$MAXIMUM_FILE_COUNT = 10; // keep maximum 10 files on server
echo exif_imagetype($_FILES['Filedata']);
if ($_FILES['Filedata']['size'] <= $MAXIMUM_FILESIZE)
{
move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temporary/".$_FILES['Filedata']['name']);
$type = exif_imagetype("./temporary/".$_FILES['Filedata']['name']);
if ($type == 1 || $type == 2 || $type == 3)
{
rename("./temporary/".$_FILES['Filedata']['name'], "./images/".$_FILES['Filedata']['name']);
}
else
{
unlink("./temporary/".$_FILES['Filedata']['name']);
}
}
$directory = opendir('./images/');
$files = array();
while ($file = readdir($directory))
{
array_push($files, array('./images/'.$file, filectime('./images/'.$file)));
}
usort($files, sorter);
if (count($files) > $MAXIMUM_FILE_COUNT)
{
$files_to_delete = array_splice($files, 0, count($files) - $MAXIMUM_FILE_COUNT);
for ($i = 0; $i < count($files_to_delete); $i++)
{
unlink($files_to_delete[$i][0]);
}
}
print_r($files);
closedir($directory);
function sorter($a, $b)
{
if ($a[1] == $b[1])
{
return 0;
}
else
{
return ($a[1] < $b[1]) ? -1 : 1;
}
}
?>
您可以使用
POST
或
GET
要求方法,將其它變數傳遞給上傳指令碼。若要將其它
POST
變數傳遞給上傳指令碼,請使用下列程式碼:
var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.browse();
function selectHandler(event:Event):void
{
var params:URLVariables = new URLVariables();
params.date = new Date();
params.ssid = "94103-1394-2345";
var request:URLRequest = new URLRequest("http://www.yourdomain.com/FileReferenceUpload/fileupload.cfm");
request.method = URLRequestMethod.POST;
request.data = params;
fileRef.upload(request, "Custom1");
}
function completeHandler(event:Event):void
{
trace("uploaded");
}
上述範例會建立 URLVariables 物件,可傳遞給遠端伺服器端指令碼。在舊版 ActionScript 中,您可以將值傳入查詢字串,以便將變數傳遞給伺服器上傳指令碼。ActionScript 3.0 則允許您使用 URLRequest 物件將變數傳遞給遠端指令碼,可讓您在傳遞資料時使用
POST
或
GET
方法,因而使得傳遞大型資料集的作業更容易、更簡潔。為了指定變數使用
GET
或
POST
要求方法來傳遞,您可以分別將
URLRequest.method
屬性設為
URLRequestMethod.GET
或
URLRequestMethod.POST
。
ActionScript 3.0 也可以讓您覆寫預設的
Filedata
上傳檔案欄位名稱,方式是:在使用
upload()
方法時加上第二個參數,如上一個範例中所示 (以
Custom1
取代預設值
Filedata
)。
根據預設,Flash Player 並不會傳送測試性上傳作業,不過您可以傳遞
true
值做為
upload()
方法的第三個參數來覆寫這項預設值。測試上傳作業的目的是要檢查是否可以完成實際的檔案上傳作業,必要時,也可以一併檢查伺服器驗證作業是否成功。
備註:
目前,測試上傳作業僅適用於 Windows 平台上的 Flash Player。
處理檔案上傳的伺服器指令碼應該要有包含下列元素的 HTTP
POST
要求:
以下是 HTTP
POST
要求樣本:
POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filename"
sushi.jpg
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filedata"; filename="sushi.jpg"
Content-Type: application/octet-stream
Test File
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Upload"
Submit Query
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
(actual file data,,,)
下列 HTTP
POST
要求樣本會傳送
api_sig
、
api_key
和
auth_token
等三個
POST
變數,並使用
"photo"
這個自訂上傳資料欄位名稱值:
POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"
sushi.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_sig"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_key"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="auth_token"
XXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="photo"; filename="sushi.jpg"
Content-Type: application/octet-stream
(actual file data,,,)
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"
Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--