如何从多图像上传器中删除图像及其详细信息?以及如何减少上传的项目数量?

时间:2012-08-21 11:02:30

标签: actionscript-3 flex

我尝试构建一个多图像上传器。在图像上传工作正常,其进度条工作正常..但它的关闭按钮不起作用。如果我点击关闭按钮,图像和细节将从file..but它也上传并显示在progres栏..我怎么能保持这个问题?任何人都可以帮助我吗??请... 我的演示是http://demo.enfintech.net/MultipleFileUpload/ 我的代码在下面给出

<?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()" xmlns:aaronhardy="aaronhardy.*">
    <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 aaronhardy.ProgressBar;

            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.geom.RoundedRectangle;
            import mx.utils.OnDemandEventDispatcher;
                private var refAddFiles:FileReferenceList=new FileReferenceList;
                private var fileReference:FileReference=new FileReference;
                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 initial:int=0;
                private var totalSize:Number=0;
                private var isSelected:Boolean=false;
                private var images:Object;
                private var fileSizeArray:Array=new Array();
                private var temp:Number=0;
                public var fileListLength:int;
                public var loaded:int;
                public var totalUploaded:int;
                [Bindable]  private var files:ArrayCollection = new ArrayCollection();
            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 fileRefSelect(event:Event):void
            {
                progressBar2.visible=false;
                upload1();
                isSelected=true;
            }
            private function uploadFiles():void
            {
                if(files.length==0)

                {
                    Alert.show("Please Select file(s)");
                }
                else
                {
                    gotoMultipleUpload();
                }
            }


            public function gotoMultipleUpload():void
            {
//              var fileReference:FileReference;
                fileReference = FileReference(list[initial]);
                fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
                fileReference.addEventListener(ProgressEvent.PROGRESS,progressBarEvent);
                fileReference.addEventListener(IOErrorEvent.IO_ERROR,uploadFails);
                fileReference.upload(urlReq);
            }

            private function uploadFails(event:IOErrorEvent):void
            {
                Alert.show("Error");
            }
            private function uploadCompleteHandler(event:Event):void
            {
                totalUploaded=totalUploaded+list[initial].size;
                if(initial<fileListLength-1)
                {
                    initial++;
                    gotoMultipleUpload();

                }
                else
                {
                    progressBar2.label="Upload Completed ("+(initial+1)+"/"+fileListLength+")";
                    Alert.show("File Uploaded Completed");
                    upload0.enabled=false;
                    cancel.enabled=false;
                    select.enabled=true;
                }
            }

            private function progressBarEvent(event:ProgressEvent):void
            {

                files[initial].currentValue=event.bytesLoaded;
                progressBar2.visible=true;
                var numPerc:Number=Math.round(((event.bytesLoaded+totalUploaded)/totalSize)*100);
                progressBar2.setProgress(event.bytesLoaded+totalUploaded,totalSize);
                progressBar2.label="Uploading "+numPerc+"% ("+(initial+1)+"/"+fileListLength+")";
            }

            public function upload1():void
            {
                try
                {
                initial=0;
                loaded=0;
                totalUploaded=0;
                list=new Array();
                list=refAddFiles.fileList;
                fileListLength=list.length;
                fileSizeArray.push(list[0].size);
                for(var i:int=0;i<fileListLength;i++)
                {
                    totalSize+=list[i].size;
                    list[i].addEventListener(Event.COMPLETE, fileRefCompleted);
                    list[i].load();
                }
                }
                catch(e:Error)
                {
                    Alert.show(e.message);
                }
            }   

            public function fileRefCompleted(event:Event):void
            {
                loaded=loaded+1;
                if(loaded==fileListLength)
                addFilesToDatagrid();
            }
            public function addFilesToDatagrid():void
            {
                var temp:Number;
                for(var i:int=0;i<list.length;i++)
                {
                    images=new Object();
                    images["fileName"]=list[i].name;
                    images["size"]=list[i].size;
                    images["preview"]=list[i].data as ByteArray;
                    images["currentValue"]=0;


                    if(list[i].size/1024>=1)
                    {
                        temp=list[i].size/1024;
                        if(temp/1024>=1)
                        {
                            temp=temp/1024;
                            images["sizeconverted"]=String(temp.toFixed(1))+"Mb";
                        }
                        else
                        {
                            images["sizeconverted"]=String(temp.toFixed(1))+"Kb";
                        }
                    }
                    files.addItem(images);

                }
                select.enabled=false;
            }
            public function removeItem():void
            {
                var item:int=dgMain.selectedIndex;
                files.removeItemAt(item);

            }
            private function cancelClick():void
            {
                fileReference.cancel();
                progressBar2.label="FileUpload Cancelled";
                upload0.enabled=true;
            }

            private function browsebtn():void
            {
                files.removeAll();
                files.refresh();
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                refAddFiles.browse(arr);
                upload0.enabled=true;
                cancel.enabled=true;
                totalUploaded=0;
                totalSize=0;

            }

            private function titleWindowClose():void
            {
                var item:int=dgMain.selectedIndex;
                files.removeAll();
                progressBar2.visible=false;
                select.enabled=true;
                upload0.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 dataField="fileName" headerText="Name" width="380" itemRenderer="itmRndrPrgrsBar"/>
                <mx:DataGridColumn dataField="sizeconverted" 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" click="cancelClick()"
                  fontSize="12" horizontalCenter="91" skinClass="Skin.setButtonSkin"/>

    </s:TitleWindow>
    <s:Label id="tet" color="red" x="468" y="394" width="130"/>
    <s:Label id="tet2" x="236" y="394" width="93" color="red"/>
</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">
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
        ]]>
    </fx:Script>

    <mx:Image horizontalCenter="0"  source="dialog-close.png"
             verticalCenter="0"  click="FlexGlobals.topLevelApplication.removeItem();"/>
</s:MXDataGridItemRenderer>

1 个答案:

答案 0 :(得分:0)

尝试下面的代码: - 我已经删除了一些皮肤和渲染器,因为它显示错误,请在下面找到修改后的代码,我已经更改了一些逻辑,使它有点工作: -

<?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()" xmlns:aaronhardy="aaronhardy.*">
    <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.geom.RoundedRectangle;
            import mx.utils.OnDemandEventDispatcher;
            private var refAddFiles:FileReferenceList=new FileReferenceList;
            private var fileReference:FileReference=new FileReference;
            private var serverSideUrl:String="http://demo.enfintech.net/MultipleFileUpload/fileUploader/uploadFile.php";
            //                      private var serverSideUrl:String="http://192.168.1.60/fileUploader/uploadFile.php";
            [Bindable]
            private var list:Array=new Array();
            public var urlReq:URLRequest;
            private var initial:int=0;

            [Bindable]
            private var totalSize:Number=0;
            private var isSelected:Boolean=false;
            private var images:Object;
            private var fileSizeArray:Array=new Array();
            private var temp:Number=0;

            [Bindable]
            public var fileListLength:int;
            public var loaded:int;
            public var totalUploaded:int;
            [Bindable]  private var files:ArrayCollection = new ArrayCollection();
            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 fileRefSelect(event:Event):void
            {
                progressBar2.visible=false;
                upload1();
                isSelected=true;
            }
            private function uploadFiles():void
            {
                if(files.length==0)

                {
                    Alert.show("Please Select file(s)");
                }
                else
                {
                    gotoMultipleUpload();
                }
            }


            public function gotoMultipleUpload():void
            {
                //              var fileReference:FileReference;
                fileReference = FileReference(list[initial]);
                fileReference.addEventListener(Event.COMPLETE, uploadCompleteHandler);
                fileReference.addEventListener(ProgressEvent.PROGRESS,progressBarEvent);
                fileReference.addEventListener(IOErrorEvent.IO_ERROR,uploadFails);
                fileReference.upload(urlReq);
            }

            private function uploadFails(event:IOErrorEvent):void
            {
                Alert.show("Error");
            }
            private function uploadCompleteHandler(event:Event):void
            {
                totalUploaded=totalUploaded+list[initial].size;

                files.refresh();

                if(initial<fileListLength-1)
                {
                    initial++;
                    gotoMultipleUpload();

                }
                else
                {
                    progressBar2.label="Upload Completed ("+(initial+1)+"/"+fileListLength+")";
                    Alert.show("File Uploaded Completed");
                    upload0.enabled=false;
                    cancel.enabled=false;
                    select.enabled=true;
                }
            }

            private function progressBarEvent(event:ProgressEvent):void
            {

                files[initial].currentValue=event.bytesLoaded;
                progressBar2.visible=true;
                var numPerc:Number=Math.round(((event.bytesLoaded+totalUploaded)/totalSize)*100);
                progressBar2.setProgress(event.bytesLoaded+totalUploaded,totalSize);
                progressBar2.label="Uploading "+numPerc+"% ("+(initial+1)+"/"+fileListLength+")";
            }

            public function upload1():void
            {
                try
                {
                    initial=0;
                    loaded=0;
                    totalUploaded=0;
                    list=new Array();
                    list=refAddFiles.fileList;
                    fileListLength=list.length;
                    fileSizeArray.push(list[0].size);
                    for(var i:int=0;i<fileListLength;i++)
                    {
                        totalSize+=list[i].size;
                        list[i].addEventListener(Event.COMPLETE, fileRefCompleted);
                        list[i].load();
                    }
                }
                catch(e:Error)
                {
                    Alert.show(e.message);
                }
            }   

            public function fileRefCompleted(event:Event):void
            {
                loaded=loaded+1;
                if(loaded==fileListLength)
                    addFilesToDatagrid();
            }
            public function addFilesToDatagrid():void
            {
                var temp:Number;
                for(var i:int=0;i<list.length;i++)
                {
                    images=new Object();
                    images["fileName"]=list[i].name;
                    images["size"]=list[i].size;
                    images["preview"]=list[i].data as ByteArray;
                    images["currentValue"]=0;


                    if(list[i].size/1024>=1)
                    {
                        temp=list[i].size/1024;
                        if(temp/1024>=1)
                        {
                            temp=temp/1024;
                            images["sizeconverted"]=String(temp.toFixed(1))+"Mb";
                        }
                        else
                        {
                            images["sizeconverted"]=String(temp.toFixed(1))+"Kb";
                        }
                    }
                    files.addItem(images);

                }
                select.enabled=false;
            }
            public function removeItem(event:MouseEvent):void
            {
                var item:int=dgMain.selectedIndex;
                files.getItemAt(item)
                totalSize -= files.getItemAt(item).size;
                files.removeItemAt(item);
                fileListLength = list.length = files.length;

            }
            private function cancelClick():void
            {
                fileReference.cancel();
                progressBar2.label="FileUpload Cancelled";
                upload0.enabled=true;
            }

            private function browsebtn():void
            {
                files.removeAll();
                files.refresh();
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                refAddFiles.browse(arr);
                upload0.enabled=true;
                cancel.enabled=true;
                totalUploaded=0;
                totalSize=0;

            }

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

        ]]>
    </fx:Script>
    <s:TitleWindow x="204" y="10" width="520" height="325" id="titleWindow"
                   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"/>
                <mx:DataGridColumn dataField="fileName" headerText="Name" width="380"/>
                <mx:DataGridColumn dataField="sizeconverted" 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"             
                        labelPlacement="center" mode="manual" 
                        />
        <s:Button id="select" bottom="5" width="87" height="30" label="Select files"
                  click="browsebtn()" fontFamily="Arial" fontSize="12" horizontalCenter="-91"
                  />
        <s:Button id="upload0" bottom="5" width="79" height="30" label="Upload" click="uploadFiles()"
                  fontFamily="Arial" fontSize="12" horizontalCenter="0" />
        <s:Button id="cancel" bottom="5" width="79" height="30" label="Cancel" fontFamily="Arial" click="cancelClick()"
                  fontSize="12" horizontalCenter="91" />

    </s:TitleWindow>
    <s:Label id="tet" color="red" x="468" y="394" width="130"/>
    <s:Label id="tet2" x="236" y="394" width="93" color="red"/>
</s:Application>

buttonClose.mxml : -

<?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[
            import mx.core.FlexGlobals;

            override public function set data(value:Object):void
            {
                super.data = value;
                if(value.currentValue >0)
                    closeImage.visible = false;
            }

        ]]>
    </fx:Script>

    <mx:Image id="closeImage" horizontalCenter="0"  source="dialog-close.png"
              verticalCenter="0"  click="FlexGlobals.topLevelApplication.removeItem(event);"/>
</s:MXDataGridItemRenderer>

希望这可以帮助你...