Upload image by using Flex and PHP

I was wondering if anyone knows the best 开发者_开发知识库way to upload the image file by using Flex 4 and PHP. I have searched online but most of them are using Flex 2 or older version. I am just curious if there are any new ways to do it. If you know any good sites or articles, please reply. I appreciate the help!

update: just found a good one here..

http://livedocs.adobe.com/flex/3/html/help.html?content=17_Networking_and_communications_7.html

this is going to be a long one...

So! The steps are:

1. Open a browse window.
2. Listen for user selecting file
3. Instatiate the selected file to a variable
4. Wait for upload command.
5. Listen for progress to be able to give visual feedback about the upload progress (optional).
6. Listen for complete event.
7. Listen for data complete event. Done.

MXML Code (excerpt):

<!-- Will open the browse window. -->
<s:Button id="bttSelectFile" label="Select file" click="selectFile()"/>
<!-- Will validate and start the upload process. -->
<s:Button id="bttUpload" label="Upload file" click="upload()"/>
<!-- Shows upload progress after it starts. -->
<mx:ProgressBar id="progressBar" labelPlacement="center" label="0%" width="300" height="40"
   horizontalCenter="0" verticalCenter="0" alpha="0"
   minimum="0" maximum="100" indeterminate="false" mode="manual"/>

ActionScript Part:

//----------------------------------------------------------
//START of Part 1: Initialization and declarations stage
//----------------------------------------------------------

import mx.controls.Alert;

//If relative doesn't work, try absolute path. Might differ between localhost home setup and production server.
private const UPLOAD_URL:String='uploadFile.php';
private var fileReference:FileReference;

//Handler for the application or component (etc) initialize event.
private function init():void
{
   initializeFileReference();
}
//Instantiates fileReference variable and adds listeners.
private function initializeFileReference():void
{
   fileReference=new FileReference();
   fileReference.addEventListener(Event.SELECT,fileSelectHandler);//Dispatched when user selects a file from Dialog Box.
   fileReference.addEventListener(Event.CANCEL,fileCancelHandler);//Dispatched when user dismisses the Dialog Box.
   fileReference.addEventListener(HTTPStatusEvent.HTTP_STATUS,fileErrorHandler);//HTTP Error
   fileReference.addEventListener(IOErrorEvent.IO_ERROR,fileErrorHandler);//IO Error
   fileReference.addEventListener(SecurityErrorEvent.SECURITY_ERROR,fileErrorHandler);//Security Sandbox Error
   fileReference.addEventListener(ProgressEvent.PROGRESS,fileProgressHandler);//Upload Progress
   fileReference.addEventListener(Event.COMPLETE,fileCompleteHandler);//Dispatches when the file upload operation completes successfully 
   fileReference.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fileDataCompleteHandler);//Dispatched when data has been received from the server after a successful upload.
}
//Set fileReference to NULL and removes listeners.
private function killFileReference():void
{
   fileReference.removeEventListener(Event.SELECT,fileSelectHandler);
   fileReference.removeEventListener(Event.CANCEL,fileCancelHandler);
   fileReference.removeEventListener(HTTPStatusEvent.HTTP_STATUS,fileErrorHandler);
   fileReference.removeEventListener(IOErrorEvent.IO_ERROR,fileErrorHandler);
   fileReference.removeEventListener(SecurityErrorEvent.SECURITY_ERROR,fileErrorHandler);
   fileReference.removeEventListener(ProgressEvent.PROGRESS,fileProgressHandler);
   fileReference.removeEventListener(Event.COMPLETE,fileCompleteHandler); 
   fileReference.removeEventListener(DataEvent.UPLOAD_COMPLETE_DATA,fileDataCompleteHandler);
   fileReference=null;
}

//----------------------------------------------------------
//END of Part 1: Initialization and declarations stage
//----------------------------------------------------------


//----------------------------------------------------------
//START of Part 2: File Selection
//----------------------------------------------------------

//Called upon pressing the select file button (bttSelectFile click handler).
private function selectFile():void
{
   //Try to open the browse window.
   try
   {
      //I disable the browse button after it's been clicked, I will enable it later. [OPTIONAL]
      bttSelectFile.enabled=false;
      //Limit the files the user can select.
      fileReference.browse(getTypes());
   }
   catch(e:Error){bttSelectFile.enabled=true;Alert.show("Cannot browse for files.","Error");}
}
private function getTypes():Array
{
   //Return an array of selectable file extensions (not MIME Types).
   var allTypes:Array=new Array(getImageTypeFilter());
   return allTypes;
}
private function getImageTypeFilter():FileFilter
{
   //Limit selection to files with the jpg or jpeg extensions.
   return new FileFilter("Images(*.jpg, *.jpeg)","*.jpg;*.jpeg;");
}
//Called after file was selected.
private function fileSelectHandler(event:Event):void
{
   //Re-enable the bttSelectFile button in case the user wants to select a different file. [OPTIONAL]
   bttSelectFile.enabled=true;
   //Change the label of the button to match the select file name. [OPTIONAL]
   bttSelectFile.label=fileReference.name;
}
//Called if user dismisses the browse window (Cancel button, ESC key or Close option)
private function fileCancelHandler(event:Event):void
{
   //Enable the button so he is able to re-open the browse window. [OPTIONAL]
   bttSelectFile.enabled=true;
}
//----------------------------------------------------------
//END of Part 2: File Selection
//----------------------------------------------------------


//----------------------------------------------------------
//START of Part 3: File Upload
//----------------------------------------------------------

//Function to validate that a file was selected and eventually other fields in the form as well.
private function valid():Boolean
{
   var result:Boolean=true;
   if(fileReference==null)
   {
      result=false;
      //I set the errorString for the button. You can give user feedback anyway you want though.
      bttSelectFile.errorString='You have not selected a file.';
   }
   //Other validation criteria
   return result;
}
//Called after the upload button (bttUpload) is pressed.
private function upload():void
{
   if(valid())
   {
      //Disable the submit button to avoid multi-submit.
      bttSubmit.enabled=false;
      //Call the upload funcion.
      startUpload();
   }
}
//Starts the upload process.
private function startUpload():void
{
   try
   {
      //Try to upload. myPicture will be the name of the FILE variable in PHP, e.g. $_FILE['myPicture'].
      fileReference.upload(new URLRequest(UPLOAD_URL),"myPicture");
   }
   catch(e:Error)
   {
      //Zero-byte file error.
      Alert.show("Zero-byte file selected.","Error");
   }
}
//I hadle errors in this example with a single function.
//It's better to have a different function to handle each of the 3 possible errors.
//Security Sandbox, IOError or HTTPStatus
private function fileErrorHandler(event:Event):void
{
   Alert.show("File upload failed.","Error");
   //For debugging you should see the entire error dump.
   Alert.show(event.toString());
}
//Set ProgressBar progress to match upload progress
private function fileProgressHandler(event:ProgressEvent):void
{
   //Calculate percentage uploaded.
   var percentage:uint= Math.round(event.bytesLoaded*100/event.bytesTotal);
   //Set progressBar progress.
   progressBar.setProgress(percentage,100);
   //Update progressBar label.
   progressBar.label=percentage+'%';
}
//Called when file was sucessfully copied to the server.
//Upload not over yet though, PHP still has to confirm it did its part.
private function fileCompleteHandler(event:Event):void
{
   //Enable bttSelectFile. [OPTIONAL]
   bttSelectFile.enabled=true;
}
//Called when the PHP upload file specified in the UPLOAD_URL constant provides an "answer".
private function fileDataCompleteHandler(event:DataEvent):void
{
   //I print (or echo) a number in PHP based on what happened
   //3 = file is not JPG MIME Type check
   //0 = move_uploaded_file function failed
   //else = return the filename. I set PHP to rename the file and if all is good, it will return the name of the newly uploaded file.
   var response:String=event.data;
   if(response=='3'){Alert.show("Selected file is not a JPG.","Error");}
   else if(response=='0'){Alert.show("File upload failed.","Error");}
   else
   {
      //Do whatever you want, upload process completed successfully.
      //Maybe insert into database?
   }
}
//----------------------------------------------------------
//END of Part 3: File Upload
//----------------------------------------------------------