浏览图像后,选择它们。如何在数据网格中显示图像的预览?我能够显示文件名,文件大小,但无法显示图像。以下是我编写的代码,请注意它不是一个完整的代码,但足以使其易于理解。感谢。
// variables used
var list:Array = new Array();
var listDP:Array = new Array();
var fileRefList:FileReferenceList;
//dgMain is my DataGrid instance
dgMain.addColumn("name");
dgMain.addColumn("size");
list = fileRefList.fileList; // List of files that user has selected
for(var i:Number = 0; i < list .length; i++)
{
list_dp.push({name:list[i].name, size:Math.round(list[i].size / 1000) + " kb"});
}
dgMain.dataProvider = new DataProvider(list_dp);
dgMain.spaceColumnsEqually();
答案 0 :(得分:1)
好问题。只需在Event.SELECT
上听到FileReferenceList
事件时加载每个图片。然后为可以显示返回的ByteArray的数据网格创建一个itemRenderer。这是一个例子:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// variables used
var list:Array;
var files:ArrayCollection = new ArrayCollection();
var fileReferenceList:FileReferenceList = new FileReferenceList();
protected function creationCompleteHandler():void
{
fileReferenceList.addEventListener(Event.SELECT, selectHandler);
}
protected function selectHandler(event:Event):void
{
load();
}
protected function completeHandler(event:Event):void
{
var fileReference:FileReference = event.target as FileReference;
var token:Object = {name:fileReference.name, size:Math.round(fileReference.size / 1000) + " kb", preview:fileReference.data};
files.addItem(token);
}
public function load():void
{
list = fileReferenceList.fileList; // List of files that user has selected
var i:int = 0;
var n:int = list.length
for(i; i < n; i++)
{
list[i].addEventListener(Event.COMPLETE, completeHandler);
list[i].load();
}
}
]]>
</mx:Script>
<mx:Button label="browse" click="fileReferenceList.browse()"/>
<mx:DataGrid id="dgMain"
dataProvider="{files}"
horizontalScrollPolicy="on"
allowMultipleSelection="true" rowHeight="25">
<mx:columns>
<mx:DataGridColumn dataField="preview" headerText="preview">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas verticalCenter="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image source="{data.preview}" width="20" height="20"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="name" headerText="Name" />
<mx:DataGridColumn dataField="size" headerText="Size" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
如果这解决了问题,请将其标记为正确:)。
最佳, 兰斯