flex上传文件

最近在学习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>

 

评论

1 楼 qingteng1983 2010-11-04  

你好！
能支持断点续传吗？