使用flex創建圖像預覽

Question

我正在使用flex image uploader.as很快選擇圖像我正在顯示圖像名稱，大小。我也想顯示圖像的縮略圖。因此，您可以在上傳之前預覽圖像。

我已經添加了我使用的顯示上傳前預覽代碼..

任何機構可以告訴我如何去實現它？

<?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 + /空氣1.5+ - 你不能在Flash Player爲此9.

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

以下限制將適用：

• 在致電FileReference.upload()之前，請確保您已收到Complete事件以迴應FileReference.load()。

• 請務必致電FileReference.upload()以迴應用戶事件（例如按鍵或按鈕按下）。所以有一個「點擊上傳」按鈕，並觸發上傳，以響應該事件處理程序。