AdobeFlexCookBook之多重文件上传

AdobeFlexCookBook之多重文件上传

Problem Summary 问题概要

showing progressbar while uploading multiple files.在上传多个文件的同时显示进度条

Solution Summary 解决概要

Bind the FileReference Object directly to ProgressBar which is rendered in the datagrid

将文件引用对象直接同进度条绑定，此进度条在DataGrid控件里进行呈现

Explanation 解释

Initialize the FileReferenceList object to upload multiple files to server

初始化FileReferenceList 控件以上传多个文件到服务端。代码如下：

//

fileReferenceList = new FileReferenceList();
fileReferenceList.addEventListener(Event.SELECT, selectHandler);

Make an array collection to show the upload information in the datagrid when Select event fires. Add FileReference Object to arraycollection as below.

做一个Array集合对象以在DataGrid里显示上传的信息当选择事件发生的时候，照如下的步骤将文件引用对象添加到数组集合里。

var fileList:Array = fileReferenceList.fileList;
for (var i:Number=0; i<fileList.length; i++)
{
var file:FileReference = FileReference(fileList[i]);
arrayCollection.addItem({name:file.name, size:file.size, object:file})
}

In MXML, Design the DataGrid and add ProgressBar control as itemrender as below

在MXML标签里面，按照下面的方法来设计呈现使用的DataGrid以及呈现项目的itemrender

<mx:DataGrid id="dataGrid" width="500" dataProvider="{arrayCollection}" >
<mx:columns>
<mx:DataGridColumn headerText="File Name" dataField="name" width="100"/>
<mx:DataGridColumn headerText="Size" dataField="size" width="30"/>
<mx:DataGridColumn headerText="Progress" dataField="object" width="150">
<mx:itemRenderer>
<mx:Component>
<mx:HBox verticalAlign="middle">
<mx:ProgressBar label="" height="6" source="{data.object}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

The ProgressBar is created according to each row of the datagrid. when the FileReference object uploads a file to server, the ProgressEvent of the object automaticly binds the values to ProgressBar control.Make sure the Mode of the ProgressBar should be "event".( Default mode of the ProgressBar is "event")

To run this example you need a web server that should run PHP. i have used upload.php file in this example located in the same location whereyou run the this.

这样进度条控件就会照着数据表的每一行来创建。当文件引用对象上传一个文件到服务器，那么进度事件就会自动的将新的数据值绑定到进度条控件，要确保进度条的状态为“EVENT"（默认状态).

源文件的URL链接为：http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=6742