Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	verticalAlign="middle" backgroundColor="#FFFFFF">
	<mx:Script>
		<![CDATA[
			import com.riacoder.examples.vo.EmployeeVO;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.events.FaultEvent;
			import mx.controls.Alert;

			[Bindable]
			private var empCollection:ArrayCollection;

			public var xmlURL:String = "http://localhost:8080/flex_xml/employees.xml";

			private function loadXml():void
			{
				httpService.url = xmlURL;
				httpService.send();
			}

			private function onFault(event:FaultEvent):void
			{
				var title:String = event.type + " ("+ event.fault.faultCode +")";
				var text:String  = event.fault.faultString;
				Alert.show(text, title);
			}

			private function onResult(event:ResultEvent):void
			{
				var xmlList:XMLList = XML(event.result).children();
				empCollection = new ArrayCollection();
				for each(var obj:Object in xmlList)
				{
					var empVO:EmployeeVO = new EmployeeVO();
					empVO.fName  = obj.fname;
					empVO.lName  = obj.lname;
					empVO.uName  = obj.uname;
					empVO.gender = obj.gender;
					empVO.age    = obj.age;
					empVO.email  = obj.email;
					empVO.image  = obj.image;
					empCollection.addItem(empVO);
				}

			}
		]]>
	</mx:Script>

	<mx:HTTPService id="httpService"
		showBusyCursor="true"
		resultFormat="e4x"
		fault="onFault(event)"
		result="onResult(event)" />

	<mx:ApplicationControlBar dock="true">
		<mx:Button label="Load Employees" click="loadXml()" />
	</mx:ApplicationControlBar>

	<mx:TileList id="employeeList" dataProvider="{empCollection}"
		itemRenderer="com.riacoder.examples.components.EmployeeRenderer" columnCount="2" rowCount="3"
		columnWidth="350" rowHeight="160" color="#323232"/>

</mx:Application>

I have created a ItemRenderer to display the employee details for this example. I have named the file as EmployeeRenderer.mxml. See the below code.

EmployeeRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="350" height="180">
	<mx:Image source="{data.image}" width="100" height="100" verticalAlign="top" />
	<mx:VBox>
			<mx:Label text="First Name: {data.fName}" />
			<mx:Label text="Last Name: {data.lName}" />
			<mx:Label text="User Name: {data.uName}" />
			<mx:Label text="Gender: {data.gender}" />
			<mx:Label text="Age: {data.age}" />
			<mx:Label text="E-Mail Id: {data.email}" />
	</mx:VBox>
</mx:HBox>

I have created the ValueObject class named as EmployeeVO to keep a employee data.

EmployeeVO.as

package com.riacoder.examples.vo
{
	[Bindable]
	public class EmployeeVO
	{
		public var fName:String;
		public var lName:String;
		public var uName:String;
		public var gender:String;
		public var age:String;
		public var email:String;
		public var image:String;
		public function EmployeeVO()
		{
		}
	}
}

Content of the xml which I have used in this example

employees.xml

<?xml version="1.0" encoding="utf-8"?>
<employees>
	<employee>
		<fname>Senthil Kumar</fname>
		<lname>Ranganathan</lname>
		<uname>senthil</uname>
		<gender>Male</gender>
		<age>26</age>
		<email>senthil.friends@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/4.png</image>
	</employee>
	<employee>
		<fname>Ponbharathi</fname>
		<lname>Bakthaduruvan</lname>
		<uname>pon</uname>
		<gender>Male</gender>
		<age>25</age>
		<email>kbponbharathi@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/5.png</image>
	</employee>
	<employee>
		<fname>Vinoth</fname>
		<lname>Kumar</lname>
		<uname>vinoth</uname>
		<gender>Male</gender>
		<age>27</age>
		<email>vino.mib@gmail.com</email>
		<image>http://localhost:8080/flex_xml/images/3.png</image>
	</employee>
	<employee>
		<fname>Anto</fname>
		<lname>Robin</lname>
		<uname>anto</uname>
		<gender>Male</gender>
		<age>29</age>
		<email>anto@xyz.com</email>
		<image>http://localhost:8080/flex_xml/images/5.png</image>
	</employee>
</employees>

FileUploadExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	backgroundColor="#FFFFFF">

	<mx:Script>
		<![CDATA[
			import com.riacoder.examples.Uploader;

			private var uploader:Uploader = new Uploader();

			private function onUploadClick(event:MouseEvent):void
			{
				uploader.browseAndUpload();
			}
		]]>
	</mx:Script>

	<mx:Canvas width="200" height="200" horizontalCenter="0" verticalCenter="0" backgroundColor="#525252">
		<mx:Button label="Select a file and upload" horizontalCenter="0" verticalCenter="0" click="onUploadClick(event);"/>
	</mx:Canvas>

</mx:Application>

Use the following code to upload the file and for displaying the ProgressBar.

Uploader.as

package com.riacoder.examples
{

	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.ProgressEvent;
	import flash.net.FileReference;
	import flash.net.URLRequest;
	import flash.net.URLRequestMethod;
	import flash.net.URLVariables;

	import mx.controls.Alert;
	import mx.controls.ProgressBar;
	import mx.core.Application;
	import mx.core.UIComponent;
	import mx.managers.PopUpManager;

	public class Uploader
	{
		// FileReference instance, used to select the file.
		private var fileReference:FileReference;	

		// ProgressBar instance, used to display the upload status.
		private var progressBar:ProgressBar;

		// String instance, used to hold the url of the upload location.
		public static const FILE_UPLOAD_URL:String = "http://localhost/test/FileUpload.php";

		// Constructor
		public function Uploader()
		{
			// Initialize the fileReference.
			fileReference = new FileReference();

			// Register the event listeners.
                       fileReference.addEventListener(Event.SELECT, onSelect);
                       fileReference.addEventListener(ProgressEvent.PROGRESS, onProgress);
                       fileReference.addEventListener(Event.COMPLETE, onComplete);
                       fileReference.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

                      // Initialize the progressBar.
                     progressBar = new ProgressBar();
		}

		public function browseAndUpload():void
		{
			// open the file browser window.
			fileReference.browse();
		}

		private function onSelect(evt:Event):void
		{
	             try
	             {
	        	// used to upload the file to the specified location.
	        	var uploadURL:URLRequest = new URLRequest(FILE_UPLOAD_URL);
	        	// used to send the datas while uploading.
		        var uploadData:URLVariables = new URLVariables();
		        // specifiying the fileSize. So from server side you can get the fileSize.
			uploadData.fileSize = fileReference.size;
			// set the HTTP method.
			uploadURL.method = URLRequestMethod.POST;

			// set the progressBar mode to manual. So, you have to set the progress manually.
			progressBar.mode = "manual";
			// While starting the upload process ProgessBar's lable will be displayed as "Uploading File"
			progressBar.label = "Uploading file.";
			// Show the progressbar as popup.
			PopUpManager.addPopUp(progressBar, Application.application as UIComponent, true);
			PopUpManager.centerPopUp(progressBar);

			uploadURL.data = uploadData;
			// start to upload the file.
	               fileReference.upload(uploadURL);
	        }
	        catch (error:Error)
	        {
	        	Alert.show("Error "+error);
	        }
	    }

	    private function onIOError(event:IOErrorEvent):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    	Alert.show("Uploader::IOError-Unable to upload the file.  "+event.text);
	    }

	    private function onProgress(evt:ProgressEvent):void
	    {
	    	// Calculating the uploaded percentage.
	    	var numPerc:Number = Math.round((Number(evt.bytesLoaded) / Number(evt.bytesTotal)) * 100);
	    	// set the label of progessbar. So the user can see the uploaded percentage.
	    	progressBar.label = "Uploading file "+numPerc+"% Completed.";
	    	// set the progress value of the progressBar.
	    	progressBar.setProgress(numPerc, 100);
	    }

	    private function onComplete(evt:Event):void
	    {
	    	PopUpManager.removePopUp(progressBar);
	    }

	}
}

You can load your image source using the Loader class in Flex. You should create a URLRequest with the image’s location and pass it to the Loader.load() method. For Example, imageLoader.load(new URLRequest(“image location”));

See the below example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="onCreationComplete(event);">

	<mx:Script>
		<![CDATA[

			import mx.events.FlexEvent;

			// Loader instance to load the image.
			private var imageLoader:Loader;

			private function onCreationComplete(event:FlexEvent):void
			{
				// create the loader.
				imageLoader = new Loader();
				// register the complete event of imageLoader's contentLoaderInfo
				imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);
				// load the image.
				loadImage("http://localhost:8080/test/images/1.jpg");
			}

			private function onLoadComplete(event:Event):void
			{
				// set the source of the image.
				image.source = event.currentTarget.content;
			}

			private function loadImage(url:String):void
			{
				// load the content from the given url.
				imageLoader.load(new URLRequest(url));

			}

		]]>
	</mx:Script>

	<mx:Image id="image" verticalCenter="0" horizontalCenter="0"/>

</mx:Application>