Я работаю над 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>