如何为多图像上传器中的每个图像设置进度条?

时间:2012-08-08 09:59:37

标签: actionscript-3 flex flex4 flex4.5

我正在尝试完成一个多图像上传器。我部分地完成了多个图像上传器......我的项目包含一个标题窗口,一个数据网格和3个按钮(选择,上传,取消)。数据网格包含3列(图像预览,名称,大小)。我还放了两个进度条。一个是显示总图像上传进度..另一个是作为每个图像上传进度的项目渲染单独放置(进度条显示在数据网格名称列,该进度条的标签是每个图像的名称)..第一个是完美的工作..但第二个项目渲染进度条不工作..我怎么能保持它?谁能帮我??请...

我的演示如下: http://demo.enfintech.net/MultipleFileUpload/ 有时它工作正常。但是上传的图像超过4张它无法正常工作..意味着进度条不能正常工作..但图片已上传..

我的代码如下:

<?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="955" minHeight="600" creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";


        global
        {
            font-weight: bold;
        }
    </fx:Style>
    <fx:Script>
        <![CDATA[
            import flash.sampler.NewObjectSample;
            import flash.utils.flash_proxy;
            import flash.utils.setTimeout;

            import mx.charts.renderers.AreaRenderer;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.Request;
            import mx.utils.OnDemandEventDispatcher;
            private var refAddFiles:FileReferenceList=new FileReferenceList;
            private var fileReference:FileReference=new FileReference;
            private var arrSelectList:Array=new Array();
            private var arrRemoveItem:ArrayCollection=new ArrayCollection();
            private var serverSideUrl:String="http://demo.enfintech.net/MultipleFileUpload/fileUploader/uploadFile.php";
            //          private var serverSideUrl:String="http://192.168.1.60/fileUploader/uploadFile.php";
            private var list:Array=new Array();
            public var urlReq:URLRequest;
            private var refAddFilesLength:int=0;
            private var timer:Timer;
            private var i:int=0;
            private var totalSize:Number=0;
            private var isSelected:Boolean=false;
            private var images:Object;
            private var varSize:Number;
            private var numPerc:Number;
            public var crnt:Number;
            private var fileSizeArray:Array=new Array();
            private var fileSize:String;
            public var maxm:Number;
            private var temp:Number=0;
            private var uploadBytes:Number=0;
            private var temptotal:Number=0;
            private var tempVarSize:Number=0;
            private var maximumSize:Number=0;
            private var currentSize:Number=0;
            private var checkCloseClick:Boolean=false;
            [Bindable]  private var files:ArrayCollection = new ArrayCollection();
            private var fileRefUploadFiles:FileReference=new FileReference;
            private function init():void
            {
                Security.loadPolicyFile("http://demo.enfintech.net/crossdomain.xml");
                progressBar2.visible=false;
                refAddFiles.addEventListener(Event.SELECT,fileRefSelect);
                urlReq = new URLRequest(serverSideUrl);
            }

            private function fileSelect(event:Event):void
            {
                Alert.show("");
            }
            private function fileRefSelect(event:Event):void
            {
                progressBar2.visible=false;
                upload1();
                isSelected=true;
            }
            private function fileRefCompleted(event:Event):void
            {


                fileReference=event.target as FileReference;
                fileReference.removeEventListener(Event.COMPLETE, fileRefCompleted);
                fileReference.addEventListener(IOErrorEvent.IO_ERROR,error);
                if(fileReference.size!=0)
                {
                    tet2.text=fileReference.size.toString();
                    varSize=fileReference.size;
                    var tempVarSizeInBytes:Number=varSize;
                    fileSizeArray.push(tempVarSizeInBytes);
                    totalSize=varSize;
                    varSize=varSize/1024;
                    fileSize=String(varSize.toFixed(1))+"Kb";
                    tempVarSize=varSize;

                    if(varSize>1024)
                    {
                        varSize=varSize/1024;
                        fileSize=String(varSize.toFixed(1))+"Mb";
                        tempVarSize=varSize;
                    }
                    else
                    {

                    }
                    temptotal+=tempVarSizeInBytes;
                    progressBar2.maximum=temptotal;
                }
                images= {fileName:fileReference.name,size:fileSize, preview:fileReference.data,close:fileReference.name, maximum:fileReference.size, currentValue:0};
                files.addItem(images);
                select.enabled=false;
                if(checkCloseClick==true)
                {
                    upload0.enabled=true;
                }
                else
                {

                }
                i=0;

            }
            private function uploadFiles():void
            {
                if(files.length==0)

                {
                    Alert.show("Please Select file(s)");
                }
                else
                {
                    var n:int=files.length; 
                    progressBar2.minimum=0;
                    if(i<n)
                    {
                        progressBar2.visible=true;
                        fileRefUploadFiles=refAddFiles.fileList[i];
                        fileRefUploadFiles.upload(urlReq);

                        fileRefUploadFiles.addEventListener(ProgressEvent.PROGRESS,onUploadProgress);
                        fileRefUploadFiles.addEventListener(Event.COMPLETE,fileRefUploadFilesComplete);
                        select.enabled=true;
                        upload0.enabled=false;
                    }
                }
            }
            public function onUploadProgress(event:ProgressEvent):void
            {
                numPerc=Math.round(((event.bytesLoaded+uploadBytes)/temptotal)*100);
                files[i].currentValue=event.bytesLoaded;
                files[i].maXimumValue=event.bytesTotal;
                progressBar2.setProgress(uploadBytes+event.bytesLoaded,temptotal);
                progressBar2.validateNow();
                progressBar2.label=("UPLOADING "+numPerc.toString()+"% ("+(i+1).toString()+"/"+list.length.toString()+")");
            }
            private function fileRefUploadFilesComplete(event:Event):void
            {
                uploadBytes=uploadBytes+Number(fileSizeArray[i]);
                i++;
                uploadFiles();
            }

            public function upload1():void
            {
                list=refAddFiles.fileList;
                var i:int=0;
                var n:int=list.length;

                for(i; i < refAddFiles.fileList.length; i++) 
                {
                    list[i].addEventListener(ProgressEvent.PROGRESS,uploadItemRender);
                    currentSize=crnt;
                    list[i].addEventListener(Event.COMPLETE, fileRefCompleted);
                    list[i].load();
                }
            }   
            private function uploadItemRender(event:ProgressEvent):void
            {
                maximumSize=event.bytesTotal;
                currentSize=event.bytesLoaded;
            }
            public function removeItem():void
            {

                var item:int=dgMain.selectedIndex;
                files.removeItemAt(item);

            }
            private function cancelClick():void
            {
                fileRefUploadFiles.cancel();
                if(files.length!=0)
                {
                    files.removeAll();
                    fileRefUploadFiles.data.clear();
                    progressBar2.enabled=false; 
                }

            }
            private function browsebtn():void
            {

                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                //                          fileReference.browse(arr);
                refAddFiles.browse(arr);

            }
            private function titleWindowClose():void
            {
                var item:int=dgMain.selectedIndex;
                files.removeAll();
                progressBar2.visible=false;
                checkCloseClick=true;
                select.enabled=true;
            }

        ]]>
    </fx:Script>
    <s:TitleWindow x="204" y="10" width="520" height="325" id="titleWindow"
                   skinClass="TitleSkin" title="File Uploader" close="titleWindowClose()">
        <mx:DataGrid id="dgMain" x="0" y="0" width="518" height="237" allowMultipleSelection="true"
                     dataProvider="{files}" fontFamily="Arial" fontSize="12" headerHeight="0"
                     horizontalScrollPolicy="off" variableRowHeight="true">
            <mx:columns>
                <mx:DataGridColumn dataField="preview" headerText="Preview" width="40" paddingLeft="5" itemRenderer="ImageDatagrdItmRndr">
                </mx:DataGridColumn>
                <mx:DataGridColumn dataField="fileName" headerText="Name" width="380" itemRenderer="itmRndrPrgrsBar"/>
                <mx:DataGridColumn dataField="size" headerText="Size" width="60"/>
                <mx:DataGridColumn id="close" headerText="Size" width="40" itemRenderer="buttonClose"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:ProgressBar id="progressBar2" x="-1" y="237" width="518" barColor="haloblue"

                        labelPlacement="center" mode="manual" themeColor="#eaeaea"
                        trackColors="[white,halosilver]"/>
        <s:Button id="select" bottom="5" width="87" height="30" label="Select files"
                  click="browsebtn()" fontFamily="Arial" fontSize="12" horizontalCenter="-91" skinClass="Skin.setButtonSkin"
                  />
        <s:Button id="upload0" bottom="5" width="79" height="30" label="Upload" click="uploadFiles()"
                  fontFamily="Arial" fontSize="12" horizontalCenter="0" skinClass="Skin.setButtonSkin"/>
        <s:Button id="cancel" bottom="5" width="79" height="30" label="Cancel" fontFamily="Arial"
                  fontSize="12" horizontalCenter="91" skinClass="Skin.setButtonSkin"/>

    </s:TitleWindow>
    <s:VGroup>

        <s:Label id="tet" color="red" visible="false"/>
        <s:Label id="tet2" color="red"/>
    </s:VGroup>
</s:Application>

我的项目渲染进度条是

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true" xmlns:aaronhardy="aaronhardy.*">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            protected function progressBar1_updateCompleteHandler(event:FlexEvent):void
            {       
                SparkProgressBar.maximum=data.maximum;
                SparkProgressBar.value=data.currentValue;
            }
        ]]>
    </fx:Script>
<aaronhardy:ProgressBar id="SparkProgressBar" maximum="{data.maximum}"  minimum="0" skinClass="aaronhardy.ProgressBarSkin" left="0" right="0" top="0" bottom="0" updateComplete="progressBar1_updateCompleteHandler(event)"/>
<s:Label id="lblData" left="0" right="0"  text="{dataGridListData.label}" verticalCenter="0"/>
</s:MXDataGridItemRenderer>

图片itemrender

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          focusEnabled="true">
    <fx:Script>
        <![CDATA[
        ]]>
    </fx:Script>
<!--    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />-->
    <mx:Image left="5" width="31" height="20" source="{data.preview}"/>
</s:MXDataGridItemRenderer>

1 个答案:

答案 0 :(得分:0)