当社Webサイト

ブックマークの多い記事

  • 全文検索サーバ: これからSolrを始める人のためのApache Solr概要と便利な情報リスト集 (366)
  • コマンドを便利に切り替える update-alternatives 使いこなし講座 (85)
  • AIR/Flex でファイルアップロード (21)
  • AIR/Flex でドラッグ アンド ドロップ (21)
  • SeleniumRCで自己署名証明書使用のWEBアプリケーションをテストする際、セキュリティ警告を表示させない方法 (12)

    • コンテンツ

    最近の投稿

    カテゴリー

    キーワード

    Amazonサーチ

    • 06/25
      　　　　

      AIR/Flex でファイルアップロード はてなブックマーク数 はてなにブックマーク

      AIR, ActionScript, Flex, プログラム post by 末田 佳和 @ 2009 年 6 月 25 日 20:45

      こんにちは。
      プロダクト&サービス事業部 リーダーの末田です。

      今回は、AIR/Flex でファイルのアップロード(HTTPのPOST)について書こうと思います。

      ファイルアップロードにおけるAIR/FlexとINPUTタグの違い

      ファイルのアップロード自体は、わざわざAIR/Flexで行わなくても、HTMLのINPUTタグで可能ですが、AIR/Flexで行うと以下のような利点があります。

      1. ブラウザが固まらない

        2. INPUTタグによるファイルアップロードの場合、
        アップロードを行っている間、ブラウザは無反応になります。
        大きなファイルをアップロードしている場合、特に顕著に発生します。
        その時にブラウザ内をクリックするとOSから「応答なし」という判断になることもあります。
        AIR/Flexでは、そのようなことは起きません。
        また、アップロード中に他の操作を受け付けることもできます。

      2. アップロードの進捗が見えやすい

        3. INPUTタグによるファイルアップロードの場合、
        アップロードの進捗は見えない、もしくはプログレスバーが動いてはいるが、よくわからない、といった表示になります。
        Ajaxを利用して、自作のプログレスバーを表示することもできますが、
        クライアント側、サーバ側それぞれに仕組みが必要になります。
        AIR/Flexでは、アップロードの進捗をイベントとして受け取ることができるので、クライアント側だけで、自作のプログレスバーを表示することができます。

      3. ドラッグアンドドロップ等でファイルを選択できる(AIRのみ)

        4. INPUTタグによるファイルアップロードの場合、
        アップロードするファイルを指定する方法は、標準のファイル選択ダイアログのみとなりますが、AIRでは、ファイルパスの指定方法は限定されません。
        Flexでは、標準のファイル選択ダイアログのみとなります。

      基本的なファイルアップロード

      AIR/Flexの場合

      AIR/Flexでの基本的なファイルアップロードのサンプルコードです。
      以下のように動作します。

      1. ボタンをクリックすると、
      2. ファイル参照ダイアログが開き、
      3. ファイルを選択してOKをクリックすると、
      4. ファイルがアップロードされます。
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイル参照オブジェクトを準備します
      var file:FileReference = new FileReference();
 
      //ファイル参照ダイアログで、ファイルが選択された場合に発生するイベント
      file.addEventListener(Event.SELECT, function (event:Event):void {
        //アップロードするURLを指定します
        var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
        req.method = URLRequestMethod.POST;
 
        //アップロード終了イベント
        file.addEventListener(Event.COMPLETE, function (event:Event):void{
          trace("complete");
        });
 
        //アップロード実行
        file.upload(req, "file1");
      });
 
      //ファイル参照ダイアログを開く
      file.browse();
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:Application>

      Flexでは、flash.net.FileReference クラスを使います。
      このクラスだけで、ファイルの選択（ダイアログ表示）とアップロードを行うことができます。

      AIRの場合

      AIR上では、このクラスだけでなく、flash.filesystem.Fileクラスも利用することができます。
      このクラスではファイルパスを指定できるので、ファイル参照ダイアログを開かなくても、アップロードするファイルを指定できます。

      これにより、ドラッグアンドドロップ等、様々な方法でアップロードするファイルを指定できます。

      AIR上でflash.filesystem.Fileクラスを使用した場合のサンプルです。

      以下のように動作します。

      1. ボタンをクリックすると、
      2. ファイルがアップロードされます。
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

      <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイルオブジェクトを準備します
      var file:File = new File("c:\\uploadsample.txt");
 
      //アップロードするURLを指定します
      var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
      req.method = URLRequestMethod.POST;
 
      //アップロード終了イベント
      file.addEventListener(Event.COMPLETE, function (event:Event):void{
        trace("complete");
      });
 
      //アップロード実行
      file.upload(req, "file1");
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:WindowedApplication>

      アップロード時のパラメータ

      ファイルのアップロード時、一緒にリクエストパラメータを送信する場合は、
      flash.net.URLVariablesクラスを使用します。

      URLVariablesクラスに、リクエストパラメータのキー名をプロパティ名、値をプロパティの値として設定し、URLRequestクラスのdataプロパティに設定することにより、送信できます。

      1
2
3
4

      var req = new URLRequest();
var param:URLVariables = new URLVariables();
param.hogekey="hogevalue";
req.data = param;

      アップロードの進捗の取得

      アップロードの進捗度合いは、flash.net.FileReference クラスもしくは、flash.filesystem.Fileクラスのflash.events.ProgressEventから、全体のバイト数(bytesTotal)と現在アップロードしたバイト数(bytesLoaded)を取得できます。

      1
2
3
4

      file.addEventListener(ProgressEvent.PROGRESS, function (event:ProgressEvent):void {
  trace("bytesTotal=" + event.bytesTotal);
  trace("bytesLoaded=" + event.bytesLoaded);
});

      まとめ

      以上で、ファイルアップロードに関しては一通り行えると思います。
      これを利用して、詳細なプログレスバーが出る、
      HTMLでは実現が難しいようなアップローダー等が実現できます。

      INPUTタグでのアップロードでは、大きなファイルになればなるほど、
      問題が大きく、インタフェースとして使いにくいものですので、
      ぜひ活用していきたく思っています。

      使用したソフトウェア

      バージョン
      Adobe AIR 1.5
      Adobe Flex SDK 3.2.0

      あわせて読みたい

      Tags: , , ,

    3 Responses

    WP_Cloudy