Question

我正在处理flex image uploader。一旦你选择图像我就会显示图像名称，大小。我想要显示图像的缩略图..所以你可以在上传之前预览图像。

我已经添加了用于在上传前显示预览的代码..

任何人都可以告诉我如何实现它。？

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:net="flash.net.*"


                paddingTop="5"

                paddingLeft="5"

                paddingRight="5"

                paddingBottom="5"

                layout="vertical"

                applicationComplete="init();">

    <mx:Panel width="100%" 

              height="100%" 

              title="Upload List" 

              horizontalAlign="center">

        <mx:DataGrid id="fileList" width="100%" height="100%" rowHeight="50"

                     dataProvider="{uploadQueue}">

            <mx:columns>

                <mx:DataGridColumn headerText="Filename" dataField="name"/>

                <mx:DataGridColumn headerText="Progress" dataField="progress"/>

                <mx:DataGridColumn headerText="Preview"  

                                   width="65"

                                   dataField="preview" 

                                   itemRenderer="mx.controls.Image">

                </mx:DataGridColumn>

            </mx:columns>

        </mx:DataGrid>

        <mx:ControlBar>

            <mx:HBox width="100%" horizontalAlign="center">

                <mx:ButtonBar horizontalGap="2" itemClick="buttonHandler(event)">

                    <mx:dataProvider>

                        <mx:Object label="Select Files"/>

                        <mx:Object label="Start Upload"/>

                    </mx:dataProvider>

                </mx:ButtonBar>

            </mx:HBox>

        </mx:ControlBar>

    </mx:Panel>

    <mx:Script>

        <![CDATA[

            // Imports

            import mx.events.ItemClickEvent;

            import flash.net.FileReference;

            import flash.net.FileReferenceList;

            import mx.collections.ArrayCollection;

            import flash.net.FileFilter;

            import mx.controls.Alert;

            import flash.utils.ByteArray;

            import flash.events.Event;

            import mx.formatters.NumberFormatter;

            // Constants

            public const imageUrl:String = "http://dev/flexFiles/";

            public const uploadPath:String = "http://dev/flexUploader.php?id=";



            // Properties

            public var uploadList:FileReferenceList;

            private var uploadURL:URLRequest;

            private var currentFile:Object;

            private var currF:Object;

            private var imageTypes:FileFilter;

            [Bindable] public var uploadQueue:ArrayCollection = new ArrayCollection();

            public function init():void{

                // create an instance of the File Reference List

                uploadList = new FileReferenceList();

                uploadList.addEventListener(Event.SELECT,populateDataGrid);



                // set the upload URL

                uploadURL = new URLRequest();

                // set the file filter type

                imageTypes = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");



            }

            private function buttonHandler(event:ItemClickEvent):void{



                switch(event.label){



                    case 'Select Files':

                        uploadList.browse([imageTypes]); 

                        break;



                    case 'Start Upload':

                        uploadNextFile();

                        break;

                }

            }

            private function populateDataGrid(event:Event):void{

                // remove any previous entries in the upload list

                uploadQueue.removeAll();



                // add all the new items

                for each( var file:FileReference in uploadList.fileList){


                    file.load();
                    file.addEventListener(Event.COMPLETE, loadCompleted);
                    currF = file; 


                }

            }


            private function loadCompleted(event:Event):void{


                uploadQueue.addItem({name:currF.name,

                    progress:'Ready',

                    preview: currF.data

                });


            }

            private function uploadNextFile():void{

                var file:FileReference;



                // get the next file from the queue

                for each(var o:Object in uploadQueue){





                    // if we find a ready status, then start the upload

                    if (o.progress=="Ready"){

                        // save the current object for updating

                        currentFile= o;



                        // update the progress

                        o.progress="Initializing Upload";

                        uploadQueue.itemUpdated(currentFile); // force a refresh



                        // grab the file reference

                        file = o.fileRef;



                        // add event listeners

                        file.addEventListener(Event.COMPLETE, uploadComplete);

                        file.addEventListener(ProgressEvent.PROGRESS, uploadProgress);

                        file.addEventListener(IOErrorEvent.IO_ERROR, uploadError);



                        // generate an ID for this upload

                        o.uploadId=Math.round(Math.random() * (5000 - 1000));



                        // upload the file

                        uploadURL.url = uploadPath + o.uploadId ;

                        file.upload(uploadURL);



                        return;

                    }    



                }



                uploadQueue.itemUpdated(currentFile); // force a refresh

            }

            private function uploadComplete(event:Event):void{

                // Mark the upload as completed

                currentFile.progress="Complete: " + currentFile.progress;

                // set the uploaded image src

                currentFile.preview=imageUrl + 

                    currentFile.uploadId + "_" +

                    currentFile.fileRef.name;

                // find the next upload

                uploadNextFile();

            }

            private function uploadProgress(event:ProgressEvent):void{

                currentFile.progress = event.bytesLoaded + " of " + event.bytesTotal;

                uploadQueue.itemUpdated(currentFile);

            }

            private function uploadError(event:Event):void{

                currentFile.progress="Error!";

                uploadQueue.itemUpdated(currentFile); // force a refresh

                // find the next upload

                uploadNextFile();

            }

        ]]>

    </mx:Script>



</mx:Application>

Answer 1

用户必须正在运行 Flash Player 10 + / Air 1.5 + - 您无法在Flash Player 9中执行此操作。

您可以使用FileReference.load()方法将本地文件加载到应用程序中： http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#load%28%29

以下限制适用：

在致电Complete之前，请确保您已收到FileReference.load()事件以回复FileReference.upload()。
请务必致电FileReference.upload()以响应用户事件（例如按键或按键）。所以有一个“点击上传”按钮并触发上传以响应该事件处理程序。

使用flex创建图像预览

1 个答案: