예제: 파일 업로드 및 다운로드

FileIO의 예제는 Flash Player에서 파일 다운로드 및 업로드를 수행하는 기술을 보여 줍니다. 이러한 기술은 다음과 같습니다.

이 샘플에 대한 응용 프로그램 파일을 가져오려면 www.adobe.com/go/learn_programmingAS3samples_flash_kr을 참조하십시오. FileIO 응용 프로그램 파일은 Samples/FileIO 폴더에 있습니다. 이 응용 프로그램은 다음과 같은 파일로 구성됩니다.

파일	설명
FileIO.fla 또는 FileIO.mxml	Flash(FLA) 또는 Flex(MXML) 형식의 기본 응용 프로그램 파일입니다.
com/example/programmingas3/fileio/FileDownload.as	서버에서 파일을 다운로드하는 메서드가 포함된 클래스입니다.
com/example/programmingas3/fileio/FileUpload.as	서버로 파일을 업로드하는 메서드가 포함된 클래스입니다.

세부 목차

FileIO 응용 프로그램 개요

FileIO 응용 프로그램에는 사용자가 Flash Player를 사용하여 파일을 업로드하거나 다운로드할 수 있는 사용자 인터페이스가 포함되어 있습니다. 이 응용 프로그램은 먼저 com.example.programmingas3.fileio 패키지에 있는 사용자 정의 구성 요소인 FileUpload와 FileDownload를 정의합니다. 각 사용자 정의 구성 요소에서 contentComplete 이벤트를 전달하고 나면 구성 요소의 init() 메서드가 호출되어 ProgressBar 및 Button 구성 요소 인스턴스에 대한 참조를 전달하며, 이를 통해 사용자는 파일의 업로드 또는 다운로드 진행률을 확인하거나 진행 중인 파일의 전송을 취소할 수 있게 됩니다.

FileIO.mxml 파일의 관련 코드는 다음과 같습니다. Flash 버전에서는 Stage에 배치된 구성 요소가 FLA 파일에 포함되어 있으며 이러한 구성 요소의 이름은 이 단계에서 설명하는 Flex 구성 요소의 이름과 같습니다.

<example:FileUpload id="fileUpload" creationComplete="fileUpload.init(uploadProgress, cancelUpload);" />
<example:FileDownload id="fileDownload" creationComplete="fileDownload.init(downloadProgress, cancelDownload);" />

다음 코드는 진행률 막대와 두 개의 버튼이 있는 [파일 업로드] 패널을 보여 줍니다. 첫 번째 버튼인 startUpload는 FileUpload.startUpload() 메서드를 호출하고 이 메서드는 FileReference.browse() 메서드를 호출합니다. 다음 코드는 [파일 업로드] 패널에 대한 코드를 보여 줍니다.

<mx:Panel title="Upload File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
    <mx:ProgressBar id="uploadProgress" label="" mode="manual" />
    <mx:ControlBar horizontalAlign="right">
        <mx:Button id="startUpload" label="Upload..." click="fileUpload.startUpload();" />
        <mx:Button id="cancelUpload" label="Cancel" click="fileUpload.cancelUpload();" enabled="false" />
    </mx:ControlBar>
</mx:Panel>

이 코드는 스테이지에 ProgressBar 구성 요소 인스턴스와 두 개의 Button 구성 요소 버튼 인스턴스를 배치합니다. 사용자가 [업로드] 버튼(startUpload)을 클릭하면 사용자가 원격 서버로 업로드할 파일을 선택할 수 있는 운영 체제 대화 상자가 시작됩니다. 또 다른 버튼인 cancelUpload는 사용자가 파일 업로드를 시작할 때 활성화되어 언제든지 파일 전송을 중단할 수 있지만 기본적으로 비활성화되어 있습니다.

<mx:Panel title="Download File" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
    <mx:ProgressBar id="downloadProgress" label="" mode="manual" />
    <mx:ControlBar horizontalAlign="right">
        <mx:Button id="startDownload" label="Download..." click="fileDownload.startDownload();" />
        <mx:Button id="cancelDownload" label="Cancel" click="fileDownload.cancelDownload();" enabled="false" />
    </mx:ControlBar>
</mx:Panel>

이 코드는 파일 업로드 코드와 매우 비슷합니다. 사용자가 [다운로드] 버튼(startDownload)을 클릭하면 FileDownload.startDownload() 메서드가 호출되어 FileDownload.DOWNLOAD_URL 변수에 지정된 파일을 다운로드하기 시작합니다. 파일이 다운로드되는 동안 진행률 막대가 업데이트되어 파일의 다운로드 비율(속도)을 보여 줍니다. 사용자는 cancelDownload 버튼을 클릭하여 언제든지 다운로드를 취소할 수 있습니다. 그러면 진행 중인 파일 다운로드가 곧 바로 중지됩니다.

원격 서버에서 파일 다운로드

원격 서버에서 파일을 다운로드하는 작업은 flash.net.FileReference 클래스와 사용자 정의 om.example.programmingas3.fileio.FileDownload 클래스에서 처리합니다. 사용자가 [다운로드] 버튼을 클릭하면 Flash Player가 FileDownload 클래스의 DOWNLOAD_URL 변수에 지정된 파일을 다운로드하기 시작합니다.

다음 코드와 같이 com.example.programmingas3.fileio 패키지의 네 가지 변수를 정의하면 FileDownload 클래스가 시작됩니다.

    /**
     * 사용자 컴퓨터에 다운로드할 파일의 URL을 하드 코딩합니다.
     */
    private const DOWNLOAD_URL:String = "http://www.yourdomain.com/file_to_download.zip";

    /**
     * 파일 다운로드를 처리할 FileReference 인스턴스를 만듭니다.
     */
    private var fr:FileReference;

    /**
     * 다운로드 ProgressBar 구성 요소에 대한 참조를 정의합니다.
     */
    private var pb:ProgressBar;

    /**
     * 진행 중인 다운로드를 즉시 중지하기 위한 "취소"
     * 버튼에 대한 참조를 정의합니다.
     */
    private var btn:Button;

첫 번째 변수인 DOWNLOAD_URL에는 파일의 경로가 포함되어 있으며 사용자가 기본 응용 프로그램 파일에서 [다운로드] 버튼을 클릭하면 사용자의 컴퓨터로 다운로드됩니다.

두 번째 변수인 fr은 FileDownload.init() 메서드에서 초기화되며 원격 파일을 사용자의 컴퓨터로 다운로드하는 FileReference 객체입니다.

마지막 두 변수인 pb와 btn에는 FileDownload.init()에서 초기화하는 Stage의 ProgressBar 및 Button 구성 요소 인스턴스에 대한 참조가 포함되어 있습니다.

FileDownload 구성 요소 초기화

FileDownload 클래스에서 init() 메서드를 호출하면 FileDownload 구성 요소가 초기화됩니다. 이 메서드는 각각 ProgressBar 및 Button 구성 요소 인스턴스를 의미하는 pb와 btn이라는 두 개의 매개 변수를 사용합니다.

    /**
     * 구성 요소에 대한 참조를 설정하고 OPEN, 
     * PROGRESS 및 COMPLETE 이벤트에 대한 리스너를 추가합니다.
     */
    public function init(pb:ProgressBar, btn:Button):void
    {
        // 진행률 막대 및 취소 버튼에 대한 참조를 설정합니다.
        // 이러한 참조는호출하는 스크립트에서 전달됩니다.
        this.pb = pb;
        this.btn = btn;

        fr = new FileReference();
        fr.addEventListener(Event.OPEN, openHandler);
        fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
        fr.addEventListener(Event.COMPLETE, completeHandler);
    }

파일 다운로드 시작

사용자가 Stage에서 Download Button 구성 요소 인스턴스를 클릭하면 startDownload() 메서드가 파일 다운로드 프로세스를 초기화합니다. 다음 코드는 startDownload() 메서드를 보여 줍니다.

    /**
     * DOWNLOAD_URL 상수에 지정된 파일을 다운로드하기 시작합니다.
     */
    public function startDownload():void
    {
        var request:URLRequest = new URLRequest();
        request.url = DOWNLOAD_URL;
        fr.download(request);
    }

먼저 startDownload() 메서드는 새로운 URLRequest 객체를 만들고 대상 URL을 DOWNLOAD_URL 변수에서 지정한 값으로 설정합니다. 그 다음에 FileReference.download() 메서드가 호출되고 새로 만든 URLRequest 객체가 매개 변수로 전달됩니다. 그러면 운영 체제에서 사용자의 컴퓨터에 요청한 문서를 저장할 위치를 선택하라는 메시지가 표시된 대화 상자를 표시합니다. 사용자가 위치를 선택하면 open 이벤트(Event.OPEN)가 전달되고 openHandler() 메서드가 호출됩니다.

openHandler() 메서드는 ProgressBar 구성 요소의 label 속성에 대한 텍스트 형식을 설정하고 사용자가 진행 도중 즉시 다운로드를 중지할 수 있는 [취소] 버튼을 활성화합니다. openHandler() 메서드는 다음과 같습니다.

    /**
     * OPEN 이벤트가 전달되면 진행률 막대의 레이블을 변경하고
     * "취소" 버튼을 활성화하여 사용자가 다운로드 작업을
     * 중단할 수 있도록 합니다.
     */
    private function openHandler(event:Event):void
    {
        pb.label = "DOWNLOADING %3%%";
        btn.enabled = true;
    }

파일의 다운로드 진행률 모니터링

원격 서버에서 사용자의 컴퓨터로 파일을 다운로드할 때 일정 간격으로 progress 이벤트(ProgressEvent.PROGRESS)가 전달됩니다. progress 이벤트가 전달될 때마다 progressHandler() 메서드가 호출되고 Stage의 ProgressBar 구성 요소 인스턴스가 업데이트됩니다. progressHandler() 메서드에 대한 코드는 다음과 같습니다.

    /**
     * 파일이 다운로드되는 동안 진행률 막대의 상태를 업데이트합니다.
     */
    private function progressHandler(event:ProgressEvent):void
    {
        pb.setProgress(event.bytesLoaded, event.bytesTotal);
    }

progress 이벤트에는 스테이지에서 ProgressBar 구성 요소를 업데이트하는 데 사용되는 bytesLoaded 및 bytesTotal이라는 두 개의 속성이 있습니다. 이 속성은 사용자에게 파일 다운로드가 얼마나 완료되었고 얼마나 남았는지 알려 줍니다. 사용자는 언제든지 진행률 막대 아래쪽의 [취소] 버튼을 클릭하여 파일 전송을 중지할 수 있습니다.

파일이 다운로드되면 complete 이벤트(Event.COMPLETE)는 사용자에게 파일이 다운로드되었음을 알리고 [취소] 버튼을 비활성화하는 completeHandler() 메서드를 호출합니다. completeHandler() 메서드에 대한 코드는 다음과 같습니다.

    /**
     * 다운로드가 완료되면 진행률 막대의 레이블을 최종적으로 변경합니다.
     * 이때 다운로드가 이미 완료되었으므로 "취소" 버튼을
     * 비활성화합니다.
     */
    private function completeHandler(event:Event):void
    {
        pb.label = "DOWNLOAD COMPLETE";
        btn.enabled = false;
    }

파일 다운로드 취소

사용자는 언제든지 진행률 막대 아래쪽의 [취소] 버튼을 클릭하여 파일 전송을 중지하고 더 이상 다운로드되지 않도록 중단할 수 있습니다. 다음 예제는 다운로드를 취소할 수 있는 코드입니다.

    /**
     * 현재 파일 다운로드를 취소합니다.
     */
    public function cancelDownload():void
    {
        fr.cancel();
        pb.label = "DOWNLOAD CANCELLED";
        btn.enabled = false;
    }

먼저 이 코드는 파일 전송을 즉시 중지하여 더 이상 데이터를 다운로드하지 않도록 합니다. 다음으로 진행률 막대의 label 속성이 업데이트되어 사용자에게 다운로드가 취소되었음을 알립니다. 마지막으로 파일을 다시 다운로드할 때까지 사용자가 이 버튼을 다시 클릭할 수 없도록 [취소] 버튼을 비활성화합니다.

원격 서버에 파일 업로드

파일 업로드 과정은 파일 다운로드 코드와 매우 비슷합니다. FileUpload 클래스는 다음 코드와 같이 네 개의 동일한 변수를 선언합니다.

private const UPLOAD_URL:String = "http://www.yourdomain.com/your_upload_script.cfm";
private var fr:FileReference;
private var pb:ProgressBar;
private var btn:Button;

FileDownload.DOWNLOAD_URL 변수와 달리 UPLOAD_URL 변수에는 사용자의 컴퓨터에서 파일을 업로드할 서버측 스크립트의 URL이 있습니다. 나머지 세 개의 변수는 FileDownload 클래스의 변수와 마찬가지 비헤이비어를 수행합니다.

FileUpload 구성 요소 초기화

FileUpload 구성 요소에는 기본 응용 프로그램에서 호출되는 init() 메서드가 있습니다. 이 메서드는 Stage의 ProgressBar 및 Button 구성 요소 인스턴스에 대한 참조인 pb와 btn이라는 두 개의 매개 변수를 사용합니다. 다음으로 init() 메서드는 FileUpload 클래스에서 앞서 정의한 FileReference 객체를 초기화합니다. 마지막으로 이 메서드는 FileReference 객체에 네 개의 이벤트 리스너를 할당합니다. init() 메서드에 대한 코드는 다음과 같습니다.

public function init(pb:ProgressBar, btn:Button):void
{
    this.pb = pb;
    this.btn = btn;

    fr = new FileReference();
    fr.addEventListener(Event.SELECT, selectHandler);
    fr.addEventListener(Event.OPEN, openHandler);
    fr.addEventListener(ProgressEvent.PROGRESS, progressHandler);
    fr.addEventListener(Event.COMPLETE, completeHandler);
}

파일 업로드 시작

Stage에서 FileUpload.startUpload() 메서드를 호출하는 [업로드] 버튼을 클릭하면 파일 업로드가 초기화됩니다. 이 메서드는 운영 체제에서 원격 서버로 업로드할 파일을 선택하라는 메시지를 나타내는 시스템 대화 상자를 표시하는 FileReference 클래스의 browse() 메서드를 호출합니다. 다음 코드는 startUpload() 메서드에 대한 코드를 보여 줍니다.

public function startUpload():void
{
    fr.browse();
}

사용자가 업로드할 파일을 선택하면 select 이벤트(Event.SELECT)가 전달되고 selectHandler() 메서드가 호출됩니다. 우선 selectHandler() 메서드는 새로운 URLRequest 객체를 만들고 코드 앞 부분에서 정의한 UPLOAD_URL 상수의 값을 URLRequest.url 속성으로 설정합니다. 마지막으로 FileReference 객체가 선택된 파일을 지정한 서버측 스크립트에 업로드합니다. selectHandler() 메서드에 대한 코드는 다음과 같습니다.

private function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest();
    request.url = UPLOAD_URL;
    fr.upload(request);
}

FileUpload 클래스의 나머지 코드는 FileDownload 클래스에서 정의한 코드와 같습니다. 사용자가 언제든지 업로드를 종료하려는 경우에는 진행률 막대의 레이블을 설정하고 즉시 파일 전송을 중지하는 [취소] 버튼을 클릭할 수 있습니다. 진행률 막대는 progress 이벤트(ProgressEvent.PROGRESS)가 전달될 때마다 업데이트됩니다. 마찬가지로 업로드가 완료되면 진행률 막대가 업데이트되어 사용자에게 파일이 업로드되었음을 알려 줍니다. 그런 다음에는 새로 파일 전송을 시작할 때까지 [취소] 버튼이 비활성화됩니다.