Top > SAStrutsあれこれ > Flexでファイルアップロードしましょう(進行状況監視付き)

  0
    <controller
        maxFileSize="1024K"
  0
    <controller
        maxFileSize="1024M"
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:logic="util.*" layout="absolute" creationComplete="fileUploader.init(uploadProgress, cancelUpload);">
    
    <!-- ロジッククラス -->
    <logic:FileUploader2 id="fileUploader" />
    
    <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="fileUploader.startUpload();" />
            <mx:Button id="cancelUpload" label="Cancel" click="fileUploader.cancelUpload();" enabled="false" />
        </mx:ControlBar>
    </mx:Panel>
    
</mx:Application>
Everything is expanded.Everything is shortened.
  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
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
-
|
|
|
|
|
|
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!
|
|
|
|
|
-
|
!
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
!
|
|
|
|
|
|
-
|
|
!
|
|
|
|
-
|
|
|
!
|
|
|
|
-
|
-
|
-
|
!
|
|
!
|
|
|
|
-
|
!
!
!
package util {
    import flash.events.DataEvent;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.net.FileReference;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;
    import flash.system.System;
    
    import mx.controls.Alert;
    import mx.controls.Button;
    import mx.controls.ProgressBar;
    
    public class FileUploader2 {
        
        private var _fileRef:FileReference;
        
        private var pb:ProgressBar;
        
        private var btnCancel:Button;
        
        public function init(pb:ProgressBar, btn:Button):void {
            
            // 呼び出しスクリプトから渡されるプログレスバーと [キャンセル] ボタン
            // への参照を設定する
            this.pb = pb;
            this.btnCancel = btn;
    
            _fileRef = new FileReference();  
            //Event.OPEN:アップロード処理が開始するときに送出されます。
            _fileRef.addEventListener(Event.OPEN, openHandler);
            //Event.SELECT:ファイル選択ダイアログでファイルを決定すると送出されます。
            _fileRef.addEventListener(Event.SELECT, selectHandler);
            //ProgressEvent.PROGRESS:ファイルのアップロード処理中に定期的に送出されます。
            _fileRef.addEventListener(ProgressEvent.PROGRESS, progressHandler);
            //DataEvent.UPLOAD_COMPLETE_DATA: サーバーからのレスポンス受信時に送出されます。
            _fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, resultHandler);
        }
        
        /**
         * 「Upload」ボタンクリック時の処理
         * ファイル選択ダイアログを表示します。
         */
        public function startUpload():void {
            _fileRef.browse();
        }
        
        /**
         * サーバーへのファイルアップロードリクエストをPOSTします。
         */
        private function selectHandler(event:Event):void {
            
            var params:URLVariables = new URLVariables();
            
            //試しにファイルデータ以外のリクエストパラメータを付けてみます。
            params.title = "title.jpg";
            
            //アクションメソッド"upload"を指定、値は適当です。
            params.upload ="action_method";
            
            var request:URLRequest = new URLRequest("http://localhost:8080/sastruts-flex/uploadFile/");
            request.method = URLRequestMethod.POST;
            request.data = params;
            
            _fileRef.upload(request, "formFile"); 
        }
        
        /**
         * OPEN イベントが送出されたらプログレスバーのラベルを変更し、
         * [キャンセル] ボタンを有効にして、ユーザーがダウンロード操作を
         * 中止できるようにする
         */
        private function openHandler(event:Event):void {
            pb.label = "UPLOADING %3%%";
            btnCancel.enabled = true;
        }
        
        /**
         * 現在のファイルダウンロードを中止する。
         */
        public function cancelUpload():void {
            _fileRef.cancel();
            pb.label = "UPLOAD CANCELLED";
            btnCancel.enabled = false;
        }
        
        /**
         * サーバーからのレスポンス内の処理結果を判定します。
         */ 
        private function resultHandler(event:DataEvent):void {
            var result:XML = new XML(event.data);
            if( result.result  * "success" ) {
                Alert.show("アップロード成功です");
            } else {
                Alert.show("サーバー処理失敗\n\n理由 : " + result.message);
            }
            btnCancel.enabled = false;
            pb.setProgress(0,0);
        }
        
        /**
         * プログレスバーの更新を行います。
         */ 
        private function progressHandler(event:ProgressEvent):void {
            pb.setProgress(event.bytesLoaded, event.bytesTotal);
        }
    }
}

添付ファイル: fileflex_upload2_3.jpg 232件 [詳細] fileflex_upload2_2.jpg 230件 [詳細] fileflex_upload2_1.jpg 258件 [詳細]

リロード   新規 編集 凍結解除 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2012-08-08 (水) 23:26:01 (2925d)