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自体も)まともに触り始めて間もないので間違っているかもしれません。ツッコミ歓迎です。

コメントする