最近在学习flex, 看来些资料, 写了个flex上传文件。 现在贴出来记录一下。
实现上传文件,上传处理进度以及取消上传等功能。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
import mx.managers.CursorManager;
private var file:FileReference = new FileReference();
private var serverSide:String = "http://www.flash.com/uploadPic.php";//指明后台处理的文件
[Bindable]
private var percent : int = 0;
public function init():void
{
file.addEventListener(Event.SELECT, selectHandler);
file.addEventListener(Event.COMPLETE, completeHandler);
file.addEventListener(ProgressEvent.PROGRESS, progressHandler);
file.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, uploadCompleteDataHandler);
browseBtn.addEventListener(MouseEvent.CLICK, browseHandler);
}
public function browseHandler(event:MouseEvent): void
{
file.browse();
}
public function reset(): void
{
// clear input file
fileTxt.text="";
// reset process bar
processBar.setProgress(0, 100);
processBar.visible=false;
processBar.label="Uploading " + 0 + "%";
}
public function selectHandler(event:Event): void
{
// display selected file
fileTxt.text=file.name;
}
public function ioErrorHandler(event:IOErrorEvent): void
{
Alert.show("upload file IO Error!");
}
public function uploadCompleteDataHandler(event:DataEvent): void
{
}
public function progressHandler(event:ProgressEvent): void
{
var size:int = file.size;
percent = event.bytesLoaded/event.bytesTotal * 100;
// set process bar
processBar.setProgress(percent, 100);
processBar.label="Uploading " + percent + "%";
if (event.bytesLoaded == event.bytesTotal)
{
processBar.label="Upload file successfully!";
image.visible=false;
}
}
private function completeHandler(event:Event):void
{
}
public function upload(): void
{
if(fileTxt.text == "")
{
Alert.show("Please select upload file");
return;
}
processBar.visible=true;
image.visible=true;
file.upload(new URLRequest(serverSide));
}
public function cancelHandler():void
{
Alert.show("Could you cancel the uploading!","Confirm", 3, this, cancelEvent);
}
public function cancelEvent(event:CloseEvent):void
{
if (event.detail == Alert.YES)
{
file.cancel();
image.visible=false;
processBar.setProgress(0, 100);
processBar.label="You have canceled the upload file!";
}
}
]]>
</mx:Script>
<mx:Panel width="428" height="256" layout="absolute" title="File Upload" fontSize="12" y="58" x="59">
<mx:Label x="49" y="32" text="File:"/>
<mx:TextInput x="88" y="30" id="fileTxt" width="226" editable="false"/>
<mx:Button id="browseBtn" x="316.5" y="30" label="Browse"/>
<mx:Button id="uploadBtn" x="88" y="92" label="UPLOAD IT" click="upload()"/>
<mx:Button id="cancelBtn" x="183" y="92" label="Cancel" visible="false"/>
<mx:Button id="resetBtn" x="231" y="92" label="Reset" click="reset()"/>
<mx:ProgressBar id="processBar" labelPlacement="bottom" themeColor="#EE1122" minimum="0"
visible="false" maximum="100" color="0x323232" label="Loading 0%"
direction="right" mode="manual" width="358.5" y="144" x="21.5"/>
<mx:Image id="image" visible="false" x="381" y="139" source="assets/cancel_16.png" click="cancelHandler()"/>
</mx:Panel>
</mx:Application>