我正在尝试完成一个多图像上传器。我部分完成了多个图像上传器...我的项目包含一个标题窗口、一个数据网格和 3 个按钮（选择、上传、取消）。数据网格包含 3 列（图像预览、名称、大小）。我还放了两个进度条。一个是显示总图像上传进度..另一个分别作为每个图像上传进度的项目渲染（该进度条显示在数据网格名称列，该进度条的标签是每个图像的名称）..the第一个工作正常..但第二个项目渲染进度条不起作用..我该如何维护它？谁能帮我？？请...
我的演示如下.. 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>