选择要上传的图像后如何在 Flash 数据网格中显示图像？

Question

浏览图片并选择它们后。如何在数据网格中显示图像的预览？我能够显示文件名、文件大小，但无法显示图像。以下是我编写的代码，请注意它不是完整的代码，但足以使其易于理解。谢谢。

// 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();

Answer 1

好问题。当您在FileReferenceList 上听到Event.SELECT 事件时，只需加载每个图像。然后为datagrid创建一个itemRenderer，可以显示返回的ByteArray。这是一个例子：

<?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>

如果这解决了问题，请将其标记为正确:)。

最好， 兰斯