解决Flex多文件上传进度条不刷新问题
多文件上传网上传,网上一大堆,但很少有人解决有关进度条的问题,就是文件在上传之后,不关闭窗口的情况下,重新选择文件后,有的进度条的进度依然显示成了100%。 问题的原因本身和组件的itemRenderer使用有关,itemRenderer在组件中被创建后是循环使用的,并不是组件列表中有多少条数据就创建多少个itemRenderer。例如一个DataGrid组件中使用CheckBox用于选择,假设能看到的部分有10条记录,其它记录要通过拖动滚动条才能看到。那么DataGrid在创建itemRenderer时只会创建11到12个itemRenderer实例,多出的itemRenderer据说是用于定位的。然后这些itemRenderer循环使用。就是说你拖动DataGrid的滚动条在显示其它数据时,并不会创建新的itemRenderer来显示数据。
因此对于文件上传在DataGrid中使用进度条组件来显示的时候,前面如果成功上传了某个文件,重新选择文件后,itemRenderer仍然保留了上次文件上传成功的进度(FileReference)。这种情况是因为在进度条组件的监控模式使用了默认的事件侦听的方式(mode=event,可以修改监控模式,采用手工设置的方式,并重载itemRenderer的data属性来避免前面出现的问题。
<mx:DataGridColumn headerText="上传进度" width="300" id="tt"><mx:itemRenderer> <fx:Component> <mx:HBox width="130" horizontalGap="2"> <fx:Script><![CDATA[override public function set data(value:Object):void{super.data = value;progress.setProgress(0,(data as FileReference).size);(data as FileReference).addEventListener(ProgressEvent.PROGRESS,progressHandler);}private function progressHandler(event:ProgressEvent):void{progress.setProgress(event.bytesLoaded,(data as FileReference).size);} ]]></fx:Script><mx:ProgressBar id="progress" width="100%" labelPlacement="center" label="%3%%" mode="manual" minimum="0" maximum="{data.fileRefrence.size}"/><mx:LinkButton label="删除"><mx:click><![CDATA[var f: FileReference = data as FileReference;outerDocument.removeFile(f);outerDocument.files.initialize();]]></mx:click></mx:LinkButton></mx:HBox> </fx:Component> </mx:itemRenderer> </mx:DataGridColumn>