서버에 파일을 업로드하려면 먼저 사용자가 하나 이상의 파일을 선택할 수 있도록
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");
}
POST
또는
GET
메서드를 사용하는 변수를 전송하려면
URLRequest.method
및
URLRequest.data
속성을 사용하여
FileReference.upload()
메서드로 서버에 데이터를 전송할 수 있습니다.
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 컨트롤을 사용하는 업로드 또는 독립형이나 외부 플레이어를 사용하는 업로드/다운로드의 경우에는 파일이 전송되지 않습니다.
Flash Player에서 파일 업로드를 허용할 수 있도록 ColdFusion에서 서버 스크립트를 만드는 경우 다음과 비슷한 코드를 사용할 수 있습니다.
<cffile action="upload" filefield="Filedata" destination="#ExpandPath('./')#" nameconflict="OVERWRITE" />
이 ColdFusion 코드는 Flash Player에서 보낸 파일을 업로드하고 ColdFusion 템플릿과 같은 디렉토리에 저장하여 이름이 같은 파일을 덮어씁니다. 앞의 코드에서는 파일 업로드를 허용하는 데 필요한 최소한의 코드를 보여 줍니다. 실제 업무 환경에서는 이 스크립트를 사용하면 안 됩니다. 데이터 유효성 검사를 추가하여 사용자가 잠재적 위험성이 있는 서버측 스크립트 대신 이미지와 같은 허용된 파일 형식만 업로드하도록 합니다.
다음 코드에서는 PHP를 사용한 파일 업로드를 보여 줍니다. 여기에는 데이터 유효성 검사가 포함되어 있습니다. 이 스크립트는 업로드 디렉토리에 업로드된 파일 수를 10개로 제한하고, 200KB 미만의 파일만 업로드하도록 하며, 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에서는
POST
또는
GET
메서드를 사용하는 데이터를 전달할 수 있는 URLRequest 객체를 사용하여 원격 스크립트에 변수를 전달할 수 있습니다. 그러면 더 큰 데이터 집합을 더 쉽고 간편하게 전달할 수 있습니다.
GET
또는
POST
요청 메서드를 사용하여 변수를 전달할지 여부를 지정하려면
URLRequest.method
속성을 각각
URLRequestMethod.GET
또는
URLRequestMethod.POST
로 설정할 수 있습니다.
또한 ActionScript 3.0에서는 앞의 예(기본값
Filedata
를
Custom1
로 대체)와 같이 두 번째 매개 변수를
upload()
메서드로 제공하여 기본
Filedata
업로드 파일 필드 이름을 덮어 쓸 수 있습니다.
true
값을 세 번째 매개 변수로
upload()
메서드에 전달하여 이 기본값을 재정의할 수 있는 경우에도 Flash Player에서는 기본적으로 테스트 업로드를 전송하지 않습니다. 테스트 업로드의 목적은 실제로 파일이 성공적으로 업로드될지 및 서버 인증이 필요한 경우 인증이 될지 여부를 확인하는 것입니다.
참고:
현재 테스트 업로드는 Windows 기반 Flash Player에서만 가능합니다.
파일 업로드를 처리하는 서버 스크립트에는 다음 요소가 포함된 HTTP
POST
요청을 사용해야 합니다.
-
multipart/form-data
값이 있는
Content-Type
-
name
특성이 "
Filedata
"로 설정되고
filename
특성이 원본 파일의 이름으로 설정된
Content-Disposition
.
FileReference.upload()
메서드에서
uploadDataFieldName
매개 변수의 값을 전달하여 사용자 정의
name
속성을 지정할 수 있습니다.
-
파일의 이진 내용
다음은 샘플 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--
