flex:使用FileReference上传文件

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="1000" height="700"
color="#25C1E2">

<mx:Script>

<![CDATA[

private const defaultRequestUrl:String = "http://www.mysite.com/upload_ok.php";

private var file : FileReference;

private function init():void {

Security.allowDomain("*");

file = new FileReference();

file.addEventListener(Event.SELECT, onFileSelect);

file.addEventListener(ProgressEvent.PROGRESS, progressHandle);

file.addEventListener(Event.COMPLETE, completeHandle);

//file.addEventListener(Event.OPEN, openHandle);

//file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

//file.addEventListener(Event.CANCEL, cancelHandler);

}

private function onClickBrowserBtn() : void {

file.browse(getTypeFilter());

}

private function getTypeFilter() : Array {

var imagesFilter:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png");

//var docFilter:FileFilter = new FileFilter("Documents", "*.pdf;*.doc;*.txt");

return [imagesFilter];

}

private function onFileSelect(event : Event) : void {

uploadBtn.enabled = true;

infoText.htmlText = "Name: "+file.name+" "+"Size: "+file.size+" "+

"Type: " + file.type + " " +

"Date: " + file.creationDate;

}

private function onClickUploadBtn() : void {

var request : URLRequest = new URLRequest(defaultRequestUrl);

request.data = "userId=123";

file.upload(request);

}

private function progressHandle(event : ProgressEvent) : void {

progressLabel.text = "complete " + event.bytesLoaded + " bytes";

var fileUploadPercent : uint = event.bytesLoaded / event.bytesTotal * 100;

uploadProgressBar.setProgress(fileUploadPercent, 100);

uploadProgressBar.label = "Complete " + fileUploadPercent + "%";

}

private function completeHandle(event : Event) : void {

infoText.htmlText = "Upload " + file.name + " Complete!";

uploadBtn.enabled = false;

}

]]>

</mx:Script>

<mx:Button id="browserBtn" x="10" y="69" label="浏览" styleName="mylinkButton"

click="onClickBrowserBtn()"/>

<mx:Button id="uploadBtn" x="236" y="69" label="上传" enabled="false"

click="onClickUploadBtn()"/>

<mx:ProgressBar id="uploadProgressBar" x="10" y="33" width="291"

themeColor="#009dff" maximum="100" direction="right" mode="manual"/>

<mx:TextArea id="infoText" x="10" y="99" width="291" height="131"/>

<mx:Label id="progressLabel" x="10" y="10" width="291"/>

</mx:Application>

//------------------------分析--------------------------------

1 需要被上传的文件被声明为FileReference类

2 文件上传进度监控：file.addEventListener(ProgressEvent.PROGRESS, progressHandle);

3 具体上传代码：

var request : URLRequest = new URLRequest(defaultRequestUrl);

request.data = "userId=123";

file.upload(request);

注意：request.data属性设置为变量名和值组成的字符串，upload方法的参数为request

4 打开文件浏览窗口用：

file.browse(getTypeFilter());

5 注意FileFilter的用法，它直接作为FileReference类的成员函数browse的参数

var imagesFilter:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png");

6 注意进度条的用法：

private function progressHandle(event : ProgressEvent) : void {

progressLabel.text = "complete " + event.bytesLoaded + " bytes";

var fileUploadPercent : uint = event.bytesLoaded / event.bytesTotal * 100;

uploadProgressBar.setProgress(fileUploadPercent, 100);

uploadProgressBar.label = "Complete " + fileUploadPercent + "%";

}

计算当前进度：

event.bytesLoaded / event.bytesTotal

设置当前进度：

uploadProgressBar.setProgress(fileUploadPercent, 100);

显示当前进度：

<mx:ProgressBar id="uploadProgressBar" x="10" y="33" width="291"

maximum="100" direction="right" mode="manual"/>

7、URLRequest的data属性可以与URLVariables类结合使用

urlVars = new URLVariables();

urlVars.userID = 94103;

urlVars.fpVersion = flash.system.Capabilities.version;

urlReq = new URLRequest();

urlReq.method = URLRequestMethod.POST;

urlReq.data = urlVars;

urlReq.url = "http://localhost:8300/fileref/uploader.cfm";