Flex 文件上传导入组件

       上文讲到Flex利用Blazeds来上传文件，本文则封装了一个组件用于文件的上传导入，其主要功能有：

       1）文件的选择；

       2）文件类型的限定，比如只能选择txt文件，图片文件等；

       3）文件上传，利用Blazeds；

       4）文件导入，利用Blazeds；

       5）上传、导入的事件分发；

 

1、文件上传组件核心代码

<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"                     xmlns:s="library://ns.adobe.com/flex/spark"                     xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="28" creationComplete="init()">          <s:layout>                    <s:BasicLayout/>          </s:layout>          <fx:Declarations>                    <s:RemoteObject id="ro" destination="fileUpDownloadService" result="ro_resultHandler(event)"                                                         fault="ro_faultHandler(event)"/>          </fx:Declarations>          <fx:Metadata>                    [Event(name="result", type="event.FileImportEvent")]                    [Event(name="fault", type=" event.FileImportEvent")]          </fx:Metadata>          <fx:Script>                    <![CDATA[                             import mx.controls.Alert;                             import mx.messaging.channels.StreamingAMFChannel;                             import mx.rpc.events.FaultEvent;                             import mx.rpc.events.ResultEvent;                             import mx.rpc.remoting.RemoteObject;                                                         private var file:FileReference = new FileReference();                             private var _fileFilter:Array=[];                             private var ro:Object;                                                         protected function init():void{                                      file.addEventListener(Event.SELECT, selectHandler);                                      file.addEventListener(Event.COMPLETE, completeHandler);                             }                                                         private function completeHandler(event:Event):void {                                      //trace("completeHandler: " + event);                             }                                                         private function selectHandler(event:Event):void {                                      this.txtFileInfo.text = file.name;                                      this.txtFileInfo.toolTip = "文件大小: "+file.size/1000+ "K";                                      file.load();  //加载文件                             }                               /**                              * 设置文件过滤，打开文件选择框时刻选择哪些类型的文件                              * FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png")                              */                             public function set fileFilter(fileType:String):void{                                      if(!StringUtil.isEmpty(fileType) && StringUtil.trim(fileType).length>3){                                                _fileFilter = [];                                                _fileFilter.push(new FileFilter("("+fileType+")",fileType));                                      }                             }                                                                                     // Property: maxFileSize，Flash Player Limit 100 mb                             private var _maxFileSize:Number = 1024*1024*20;                                                         [Bindable]                             /**                              * 读取和设置文件最大尺寸，单位为Byte,1K = 1024Byte,默认值为20M                              */                             public function get maxFileSize():Number                             {                                      return _maxFileSize;                             }                                                         public function set maxFileSize(size:Number):void                             {                                      _maxFileSize = size;                             }                                                         private function checkFile():Boolean{                                      var blnResult:Boolean = true;                                      if(StringUtil.isEmpty(txtFileInfo.text)){                                                Alert.show("请选择要上传的文件!");                                                return false;                                      }                                      if(file.size>_maxFileSize){    //文件大小验证失败                                                Alert.show(StringUtil.format("该文件尺寸{0} 超出最大尺寸 {1}.",file.size/1000,_maxFileSize/1000));                                                blnResult = false;                                      }                                      if(file.data==null){                                                Alert.show("文件正在加载中，请稍等!");                                                blnResult = false;                                      }                                      return blnResult;                             }                                                         protected function btnBrowse_clickHandler(event:MouseEvent):void                             {                                      file.browse(_fileFilter); //打开文件选择框                             }                               protected function btnDelete_clickHandler(event:MouseEvent):void                             {                                      //删除远程服务器的文件                                      //清空txtFileInfo                                      txtFileInfo.text = "";                                      txtFileInfo.toolTip = "";                             }                               protected function ro_resultHandler(event:ResultEvent):void                             {                                      this.dispatchEvent(new FileImportEvent(FileImportEvent.RESULT,event.result));                             }                               protected function ro_faultHandler(event:FaultEvent):void                             {                                      this.dispatchEvent(new FileImportEvent(FileImportEvent.FAULT,null,event.fault));                             }                                                         public function importFile(headers:Array):Boolean{                                      var isSuccess:Boolean = checkFile();                                      if(isSuccess){                                                ro.importFile(file.data,headers,file.type);                                      }                                      return isSuccess;                             }                                                         public function uploadFile():Boolean{                                      var isSuccess:Boolean = checkFile();                                      if(isSuccess){                                                ro.uploadFile(file.data,file.type);                                      }                                      return isSuccess;                             }                      ]]>          </fx:Script>          <s:TextInput left="3" top="3" right="55" id="txtFileInfo" editable="false" bottom="3"/>          <mx:Button right="29" top="3" label="" width="25" id="btnBrowse" toolTip="选择文件" click="btnBrowse_clickHandler(event)"                                paddingLeft="3" paddingRight="3" bottom="3" icon = "@Embed('assets/tool_folder_explore.png')"/>          <mx:Button right="3" top="3" bottom="3" label="" width="25" id="btnDelete" icon = "@Embed('assets/tool_delete.png')"                                labelPlacement="right" click="btnDelete_clickHandler(event)" paddingLeft="3" paddingRight="3" toolTip="取消文件选择"/> </s:Group>

2、FileImportEvent事件

package event {     import flash.events.Event;         import mx.rpc.Fault;       public class FileImportEvent extends Event     {        public static const RESULT:String      = "result";        public static const FAULT:String       = "fault";        //        private var _result:Object;        private var _fault:Fault;         //        public function FileImportEvent(type:String, result:Object=null, fault:Fault=null)        {            super(type,true);            this._result = result;            this._fault = fault;        }        //        public function get result():Object{            return _result;        }        public function set result(value:Object):void{            _result = value;        }        //        public function get fault():Fault{            return _fault;        }        public function set fault(value:Fault):void{            _fault = value;        }     } }

 

3、示例

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"               xmlns:s="library://ns.adobe.com/flex/spark"               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600" creationComplete="init()" width="370" height="180"               xmlns:fileupload="fileupload.*">     <fx:Script>        <![CDATA[            import mx.controls.Alert;                       import event.FileImportEvent;                                  protected function init():void{                          }              protected function btnUpload_clickHandler(event:MouseEvent):void            {               if(importer.checkFile())                   importer.uploadFile();            }              protected function importer_resultHandler(event:FileImportEvent):void            {               Alert.show("文件上传、导入成功!");               //如果是文件导入的话，则可通过               //event.result 获取导入的文件数据            }              protected function importer_faultHandler(event:FileImportEvent):void            {               Alert.show("文件上传、导入失败："+event.fault.faultString);            }              protected function btnImport_clickHandler(event:MouseEvent):void            {               //当然FileUpDownloadService需增加importFile方法，并增加导入文件的解析               if(importer.checkFile())                   importer.importFile(null);             }        ]]>     </fx:Script>     <fx:Declarations>        <!--限定只能选择文本文件-->        <fileupload:FileImporter id="importer" fileFilter="*.txt"                              result="importer_resultHandler(event)" fault="importer_faultHandler(event)"/>     </fx:Declarations>     <s:Button id="btnUpload" click="btnUpload_clickHandler(event)" label="上传" x="89" y="88"/>     <s:Button id="btnImport" click="btnImport_clickHandler(event)" label="导入" x="182" y="88"/> </s:Application>