Flex2でとりあえずやってみたかったのがこれ。

* ファイルサイズは5Mbytesが上限です。
* 実際にはファイルの保存などは行ってません。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" 
  width="400" 
  height="120" 
  creationComplete="initApp()">
  <mx:Script>
  <![CDATA[
    import flash.events.*
    import flash.net.FileReference;
    import mx.controls.Alert;
    
    private var max_size:int;
    private var post_url:String;
    private var fileRef:FileReference;

    private function initApp():void{
      max_size = Application.application.parameters.maxSize;
      post_url = Application.application.parameters.postURL;
      fileRef = new FileReference();
      fileRef.addEventListener(Event.SELECT,fileSelectEvent);
      fileRef.addEventListener(Event.OPEN,fileOpenEvent);
      fileRef.addEventListener(Event.COMPLETE,fileCompleteEvent);
      fileRef.addEventListener(ProgressEvent.PROGRESS,progressEvent);
      btn_browse.addEventListener(MouseEvent.CLICK,selectFile);
      btn_upload.addEventListener(MouseEvent.CLICK,upload);
      btn_cancel.addEventListener(MouseEvent.CLICK,cancel);
    }
    
    private function fileSelectEvent(event:Event):void {
      progress.label = "";
      if(fileRef.size > max_size) {
        Alert.show("Size over");
        btn_upload.visible = true;
        btn_upload.enabled = false;
        btn_cancel.visible = false;
        btn_cancel.enabled = false;
        btn_browse.enabled = true;
        return;
      }
      progress.setProgress(0, 0);
      text_file.text = fileRef.name;
      btn_upload.visible = true;
      btn_upload.enabled = true;
    }
    
    private function fileOpenEvent(event:Event):void {
      btn_upload.visible = false;
      btn_upload.enabled = false;
      btn_cancel.visible = true;
      btn_cancel.enabled = true;
      btn_browse.enabled = false;
    }

    private function fileCompleteEvent(event:Event):void {
      progress.label = "Completed";
      btn_upload.visible = true;
      btn_upload.enabled = false;
      btn_cancel.visible = false;
      btn_cancel.enabled = false;
      btn_browse.enabled = true;
    }

    private function progressEvent(event:ProgressEvent):void {
      progress.setProgress(event.bytesLoaded, event.bytesTotal);
    }
    
    private function selectFile(event:MouseEvent):void {
      fileRef.browse();
    }
    
    private function upload(event:MouseEvent):void {
      var param:String = "file";
      var req:URLRequest = new URLRequest(post_url);
      req.method = URLRequestMethod.POST;
      fileRef.upload(req, param, false);
    }

    private function cancel(event:MouseEvent):void {
      fileRef.cancel();
      progress.label = "Canceled";
      progress.setProgress(0,0);
            btn_upload.visible = true;
            btn_upload.enabled = true;
            btn_cancel.visible = false;
            btn_cancel.enabled = false;
            btn_browse.enabled = true;      
    }
  ]]>
</mx:Script>
  <mx:Panel x="0" y="0" width="400" height="120" layout="absolute">
    <mx:TextInput x="10" y="10" width="180" id="text_file"/>
    <mx:Button x="198" y="10" label="Browse" width="80" id="btn_browse"/>
    <mx:Button x="286" y="10" label="Upload" width="80" id="btn_upload" enabled="false"/>
    <mx:Button x="286" y="10" label="Cancel" width="80" id="btn_cancel" visible="false" enabled="false"/>
    <mx:ProgressBar x="10" y="40" width="356" id="progress" label="" mode="manual"/>
  </mx:Panel>
</mx:Application>

ちょっと長く見えますが、ほとんどがボタンを見せたり隠したりと機能とは関係ないところです。
ちゃんとした人が書いたらもっと綺麗にまとまると思います。

AJAXでもできるんだろうけど、結構面倒ですがFlex2だとあっという間です。
もちろんアップロードされたファイルを保存するなり加工するなりのCGIは必要です。

で、FileRefクラスを使ってみた感想は

いいとこ
・アップロードの状態を簡単に表示できる
・アップロードさせる前にファイルサイズをチェックできる
・キャンセルが簡単

わるいとこ
・アップロードが終了したときの返り値がHTTPステータスしか取れない

てな感じです。
もちろんAJAXなアップローダーを実際に触ったわけでも、FileRef自体(というかFlex自体も)まともに触り始めて間もないので間違っているかもしれません。ツッコミ歓迎です。

              

              

トラックバック(0)

トラックバックURL: http://mt.hide-k.net/mt-tb.cgi/636

コメントする

プロフィール

このブログ記事について

このページは、hideが2007年3月 6日 18:55に書いたブログ記事です。

ひとつ前のブログ記事は「Fedora Core 6にFlex2をインストールして遊ぶ」です。

次のブログ記事は「Hed Kandi: Twisted Disco (2007) / Various Artists」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。