When you develop and application most, if no all, of the times you will have to provide some way for your users to upload files, for example to update their profile picture or to share a document, so let's see how we can implement this using jQuery.

<div class="toc">
	<h3><a name="toc"></a>Table Of Contents</h3>
	<dl>
		<dt>
			<a href="#introduction">1. Introduction</a>
		</dt>
		<dt>
			<a href="#tools">2. Tools we are going to use</a>
		</dt>
		<dt>
			<a href="#back_end">3. Back end (PHP)</a>
		</dt>
		<dd>
			<dl>
				<dt>
					<a href="#b_profile_pic">3.1 Profile picture</a>
				</dt>
			</dl>
		</dd>
		<dd>
			<dl>
				<dt>
					<a href="#b_file_share">3.2 File share</a>
				</dt>
			</dl>
		</dd>
		<dt>
			<a href="#front_end">4. Front end (jQuery + Dropper)</a>
		</dt>
		<dd>
			<dl>
				<dt>
					<a href="#f_profile_pic">4.1 Profile picture</a>
				</dt>
			</dl>
		</dd>
		<dd>
			<dl>
				<dt>
					<a href="#f_file_share">4.2 File share</a>
				</dt>
			</dl>
		</dd>
		<dt>
			<a href="#download">5. Download</a>
		</dt>
	</dl>
</div>
&nbsp;

<h2><a name="introduction"></a>1. Introduction</h2>
So imagine you have to develop a file sharing tool, you want to support user registration and the users can upload a profile picture for their accounts. For simplicity we are going to focus only on the two aspects that matter for this example uploading an profile picture and uploading any kind of file for sharing.
<h2><a name="tools"></a>2. Tools we are going to use</h2>
We will be using the following tools:
<ol>
	<li>PHP 5.5</li>
	<li><a href="https://www.sublimetext.com/">sublime text 3</a></li>
	<li><a href="http://docs.slimframework.com/">Slim framework</a></li>
	<li><a href="https://getcomposer.org/">composer</a></li>
	<li><a href="https://nodejs.org/">node.js v0.10.33</a></li>
	<li><a href="">bower</a></li>
	<li><a href="http://www.ubuntu.com/">GNU/Linux distro (Ubuntu)</a></li>
</ol>
<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>

<h2><a name="back_end"></a>3. Back end (PHP)</h2>
Let's start with the back end of our application, I am using Slim a PHP micro framework, to get the job done easily but you can implement it just anyway you want.
First we need to create a composer project and install Slim, so open a terminal or command console and type:
[bash]
composer init
composer require slim/slim
[/bash]

Composer will ask you a few questions and then it will generate a composer.json file, with <code>composer require slim/slim</code> we are installing Slim as a dependency, you should get an output like the following on your terminal.

[bash]
Using version ~2.6 for slim/slim
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing slim/slim (2.6.2)
    Downloading: 100%

Writing lock file
Generating autoload files
[/bash]

Your composer.json file should looks like:

<code>compose.json</code>
[javascript]
{
    "name": "webcodegeeks/jquery-file-upload",
    "description": "A jQuery file upload example",
    "license": "MIT",
    "authors": [
        {
            "name": "Eivar Montenegro"
        }
    ],
    "require": {
        "slim/slim": "~2.6"
    }
}
[/javascript]

We are ready to create our index.php file and start working in the back end.
Create a new file, name it index.php and add the following code to it:

<code>index.php</code>
[php]
<?php
require 'vendor/autoload.php';

$app = new \Slim\Slim();

$app->get('/profile/:userId', function ($userId) {
	echo 'Profile picture form will be shown here';
});

$app->post('/profile/:userId', function ($userId) {
	echo 'Profile picture upload will be processed here!';
});

$app->get('/file-upload', function () {
	echo 'File upload form will be shown here';
});

$app->post('/file-upload', function () {
	echo 'File upload will be processed here!';
});

$app->run();
[/php]

Our index file is starting to have some structure, the simplest way to test our app is using <a href="http://php.net/manual/en/features.commandline.webserver.php">PHP Built-id web server</a>, just run the following command in your terminal <code>php -S localhost:8080</code> and visit http://localhost:8080/profile/1 in your web browser, there should be a message displayed for you.

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>


<h3><a name="b_profile_pic"></a>3.1 Profile picture</h3>
We can now start working on our profile picture upload; create a new file and name it profile_pic_form.php and add the following code to it:

<code>profile_pic_form.php</code>
[php]
<html>
	<head></head>
	<body>
		<?php if (!empty($app->errors)): ?>
			<div id="errors">
				<?php
				foreach ($app->errors as $key => $error) :
					echo "$key: " . var_export($error, true);
				endforeach
				?>
			</div>
		<?php endif ?>
		<?php if (!empty($app->message)): ?>
			<div id="notices">
				<?php
				echo "File {$app->message['name']} uploaded successfully!";
				?>
			</div>
		<?php endif ?>
		<form method="POST" action="/profile/<?php echo $userId ?>" enctype="multipart/form-data" >
			<input type="file" name="profile_pic" value=""/>
			<input type="submit" value="Upload profile picture"/>
		</form>
	</body>
</html>
[/php]

Here we have defined a simple html form, there are also two conditions to show errors or a message if such variables are not empty, that is just to provide some feedback to the user.
At this point you should be able to select a file from your computer and upload it to our testing back end just remember to start the PHP built-in server using <code>php -S ...</code>; Your files would be stored in uploads folder.

We are going to use <code>codeguy/upload</code> a third party library to handle file uploads, let's add it just like we did with Slim:
[bash]
composer require codeguy/upload
Using version ~1.3 for codeguy/upload
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing codeguy/upload (1.3.2)
    Downloading: 100%

Writing lock file
Generating autoload files
[/bash]
And we can update our index.php to use new file upload library.

<div class="tip"><strong>Tip</strong><br/>Make sure that your <a href="http://php.net/manual/en/ini.core.php">php.ini file</a> is configured correctly, specially <code>upload_max_filesize</code></div>

<code>index.php</code>
[php]
<?php
require 'vendor/autoload.php';

$appPath = dirname(__FILE__) ;

$app = new \Slim\Slim();
$app->storage = new \Upload\Storage\FileSystem($appPath . '/uploads');

$app->get('/profile/:userId', function ($userId) {
	include_once 'profile_pic_form.php';
});

$app->post('/profile/:userId', function ($userId) use($app) {
	$file = new \Upload\File('profile_pic', $app->storage);
	$newFilename = uniqid();
	$file->setName($newFilename);

	// Validate file
	// MimeType List => http://www.webmaster-toolkit.com/mime-types.shtml
	$file->addValidations([
		new \Upload\Validation\Mimetype(['image/png', 'image/jpeg']),
		new \Upload\Validation\Size('5M'),
	]);
	try {
		$app->message = [
			'name' => $file->getNameWithExtension(),
			'mime' => $file->getMimetype(),
			'size' => $file->getSize(),
			'md5'  => $file->getMd5(),
			'dimensions' => $file->getDimensions()
		];
		$file->upload();
	} catch (\Exception $e) {
		$app->errors = $file->getErrors();
	}
	include_once 'profile_pic_form.php';
});

$app->get('/file-upload', function () {
	echo 'File upload form will be shown here';
});

$app->post('/file-upload', function () {
	echo 'File upload will be processed here!';
});

$app->run();
[/php]

We have implemented the basic process to upload a file, the most important part here is the post route /profile/:userId because there we create an \Upload\File instance, we add a MIME type validation and store the uploaded file.
<div class="tip"><strong>Tip</strong><br/>For more details on <code>codeguy/upload</code> you can check the <a href="https://github.com/codeguy/Upload">github.com project</a></div>

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>


<h3><a name="b_file_share"></a>3.2 File share</h3>
Now lets do the same for our file sharing routes, first the upload form.
Create the file file_share_form.php, open it and add the following source code:

<code>file_share_form.php</code>
[php]
<html>
	<head></head>
	<body>
		<?php if (!empty($app->errors)): ?>
			<div id="errors">
				<?php
				foreach ($app->errors as $key => $error) :
					echo "$key: " . var_export($error, true);
				endforeach
				?>
			</div>
		<?php endif ?>
		<?php if (!empty($app->messages)): ?>
			<div id="notices">
				<?php
				foreach ($app->messages as $message) :
					echo "<p>File {$message['name']} uploaded successfully!<br/></p>";
				endforeach
				?>
			</div>
		<?php endif ?>
		<form method="POST" action="/file-upload" enctype="multipart/form-data" >
			<input type="file" name="a_file" value=""/>
			<input type="submit" value="Upload file"/>
		</form>
	</body>
</html>
[/php]

Our file sharing form is very similar to the one we used for a profile picture, it's ok for now we only want to make sure that we can upload a document.

Open your index.php file and add the file upload processing code for /file-upload route:

<code>index.php</code>
[php]
<?php
require 'vendor/autoload.php';

$appPath = dirname(__FILE__) ;

$app = new \Slim\Slim();
$app->storage = new \Upload\Storage\FileSystem($appPath . '/uploads');

$app->get('/profile/:userId', function ($userId) {
	include_once 'profile_pic_form.php';
});

$app->post('/profile/:userId', function ($userId) use($app) {
	$file = new \Upload\File('profile_pic', $app->storage);
	$newFilename = uniqid();
	$file->setName($newFilename);

	// Validate file
	// MimeType List => http://www.webmaster-toolkit.com/mime-types.shtml
	$file->addValidations([
		new \Upload\Validation\Mimetype(['image/png', 'image/jpeg']),
		new \Upload\Validation\Size('5M'),
	]);
	try {
		$app->message = [
			'name' => $file->getNameWithExtension(),
			'mime' => $file->getMimetype(),
			'size' => $file->getSize(),
			'md5'  => $file->getMd5(),
			'dimensions' => $file->getDimensions()
		];
		$file->upload();
	} catch (\Exception $e) {
		$app->errors = $file->getErrors();
	}
	include_once 'profile_pic_form.php';
});

$app->get('/file-upload', function () {
	include_once 'file_share_form.php';
});

$app->post('/file-upload', function () use($app) {
	$messages = [];
	foreach ($_FILES as $key => $data) {
		$file = new \Upload\File($key, $app->storage);
		$file->setName(uniqid());
		// Validate file
		// MimeType List => http://www.webmaster-toolkit.com/mime-types.shtml
		$file->addValidations([
			new \Upload\Validation\Mimetype(['image/png', 'image/jpeg', 'application/pdf']),
			new \Upload\Validation\Size('5M'),
		]);
		try {
			array_push($message, [
				'name' => $file->getNameWithExtension(),
				'mime' => $file->getMimetype(),
				'size' => $file->getSize(),
				'md5'  => $file->getMd5(),
				'dimensions' => $file->getDimensions()
			]);
			$file->upload();
		} catch (\Exception $e) {
			$app->errors = $file->getErrors();
			break;
		}
	}
	$app->messages = $messages;
	include_once 'file_share_form.php';
});

$app->run();
[/php]
Now when you post a file or files to <code>/file-upload</code>, each one of them will be saved and details of each file will be stored on <code>$app->message</code>.

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>


<h2><a name="front_end"></a>4. Front end (jQuery + Dropper)</h2>
Is time for improving our front end using jQuery, I am using bower to download all required javascript libraries.

<div class="tip"><b>Tip</b><br/><a href="http://bower.io/">Bower</a> is a package manager for the web, is optimized for the front-end and keep track of downloaded packages in a manifest file named: bower.json</div>

To install bower you must install node.js first, then use npm to install bower like this: <code>npm install -g bower</code>. Once bower is installed in your system you can use it like <code>bower install &lt;package&gt;</code>
Now we will install Dropper, jquery and bootstrap. <a href="http://formstone.it/components/dropper">Dropper</a> is a jQuery plugin for simple drag and drop uploads.
You can install Dropper using the following command on your terminal: <code>bower install Dropper</code>, this should produce an output similar to:

[bash]
bower not-cached    git://github.com/benplum/Dropper.git#*
bower resolve       git://github.com/benplum/Dropper.git#*
bower download      https://github.com/benplum/Dropper/archive/1.0.1.tar.gz
bower extract       Dropper#* archive.tar.gz
bower resolved      git://github.com/benplum/Dropper.git#1.0.1
bower install       Dropper#1.0.1

Dropper#1.0.1 bower_components/Dropper
[/bash]

Also install jquery <code>bower install jquery</code> and bootstrap <code>bower install bootstrap</code> and make sure that your dependencies get saved to bower.json executing <code>bower init</code> answer the questions presented by bower and you will get a bower.json file similar to:

[javascript]
{
  "name": "jquery-file-upload",
  "version": "0.0.0",
  "authors": [
    "Eivar Montenegro"
  ],
  "main": "index.php",
  "moduleType": [
    "node"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "Dropper": "~1.0.1",
    "jquery": "~2.1.3",
    "bootstrap": "~3.3.4"
  }
}

[/javascript]

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>


<h3><a name="f_profile_pic"></a>4.1 Profile picture</h3>
We have to include the resources installed by bower, you can find those files in bower_components folder, let's modify <code>profile_pic_form.php</code>:
[php]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery file upload example</title>
	<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/Dropper/jquery.fs.dropper.min.css"/>
</head>
<body>
	<div class="container">
		<div class="row">
			<div id="freedback" class="col-md-12">
			</div>
		</div>
		<form method="POST" action="/profile/<?php echo $userId ?>" enctype="multipart/form-data" >
			<div class="form-group">
				<div id="dropzone" class="dropper dropzone">
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="/bower_components/Dropper/jquery.fs.dropper.min.js"></script>
	<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		(function ($) {
			$(function() {
				$('#dropzone').dropper({
					action: '/profile/<?php echo $userId ?>',
					postKey: 'profile_pic',
					maxSize: 5242880, //5M
					maxQueue: 10
				})
				.on('start.dropper', function (e, files) {

					$('#freedback').empty().append('<div class="alert alert-info">Upload stared</div>');
				})
				.on('fileStart.dropper', function (e, file) {
					$('#freedback').append('<div class="alert alert-info">Upload stared [' + file.name + '] ' + '0%</div>');
				})
				.on('fileProgress.dropper', function (e, file, percent) {
					$('#freedback').append('<div class="alert alert-info">Upload progress [' + file.name + '] ' + percent +'%</div>');
				})
				.on('fileComplete.dropper', function (e, file, response) {
					$('#freedback').append('<div class="alert alert-info">Upload completed [' + file.name + '] <br/>' + 'server response: ' + response +'</div>');
					if (response.errors) {
						$.each(response.errors, function (index, error) {
							$('#freedback').append('<div class="alert alert-danger">Server error: [' + error+ '] <br/></div>');
						});
					}
					if (response.message) {
						//$.each(response.message, function (index, message) {
							$('#freedback').append('<div class="alert alert-success">Upload success: [' + response.message.name + '] <br/></div>');
						//});

					}
				})
				.on('fileError.dropper', function (e, file, error) {
					$('#freedback').append('<div class="alert alert-danger">' + file.name + ': ' + error + '</div>');
				})
				.on('complete.dropper', function (e) {
					$('#freedback').append('<div class="alert alert-success">All done!</div>');
				});
			});
		})(jQuery);
	</script>
</body>
</html>
[/php]

Few things have changed, we no longer reload the entire page, so only the results of the upload process are returned in json format, we have several functions that are called in response to Dropper events, the old form was replaced with a drop zone and finally I have added all the bootstrap boilerplate code.

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>


<h3><a name="f_file_share"></a>4.2 File share</h3>
Now we gotta repeat the process with <code>file_share_form.php</code>:
[php]
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery file upload example</title>
	<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/bower_components/Dropper/jquery.fs.dropper.min.css"/>
</head>
<body>
	<div class="container">
		<div class="row">
			<div id="freedback" class="col-md-12">
			</div>
		</div>
		<form method="POST" action="/file-upload" enctype="multipart/form-data" >
			<div class="form-group">
				<div id="dropzone" class="dropper dropzone">
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
	<script type="text/javascript" src="/bower_components/Dropper/jquery.fs.dropper.min.js"></script>
	<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		(function ($) {
			$(function() {
				$('#dropzone').dropper({
					action: '/file-upload',
					postKey: 'file',
					maxSize: 5242880, //5M
					maxQueue: 10
				})
				.on('start.dropper', function (e, files) {
					$('#freedback').empty().append('<div class="alert alert-info">Upload stared</div>');
				})
				.on('fileStart.dropper', function (e, file) {
					$('#freedback').append('<div class="alert alert-info">Upload stared [' + file.name + '] ' + '0%</div>');
				})
				.on('fileProgress.dropper', function (e, file, percent) {
					$('#freedback').append('<div class="alert alert-info">Upload progress [' + file.name + '] ' + percent +'%</div>');
				})
				.on('fileComplete.dropper', function (e, file, response) {
					$('#freedback').append('<div class="alert alert-info">Upload completed [' + file.name + '] <br/>' + 'server response: ' + response +'</div>');
					if (response.errors) {
						$.each(response.errors, function (index, error) {
							$('#freedback').append('<div class="alert alert-danger">Server error: [' + error+ '] <br/></div>');
						});
					}
					if (response.message) {
						$.each(response.message, function (index, message) {
							$('#freedback').append('<div class="alert alert-success">Upload success: [' + message.name + '] <br/></div>');
						});

					}
				})
				.on('fileError.dropper', function (e, file, error) {
					$('#freedback').append('<div class="alert alert-danger">' + file.name + ': ' + error + '</div>');
				})
				.on('complete.dropper', function (e) {
					$('#freedback').append('<div class="alert alert-success">All done!</div>');
				});
			});
		})(jQuery);
	</script>
</body>
</html>
[/php]
Just like before we have some functions for handling all the events triggered by Dropper, we replaced the from with a drop zone and all the bootstrap boilerplate was added.

Last but not least, we need to update index.php so it will send the correct format (JSON), here is the final <code>index.php</code> file:
[php]
<?php
require 'vendor/autoload.php';

$appPath = dirname(__FILE__) ;

$app = new \Slim\Slim();
$app->storage = new \Upload\Storage\FileSystem($appPath . '/uploads');

$app->get('/profile/:userId', function ($userId) {
	include_once 'profile_pic_form.php';
});

$app->post('/profile/:userId', function ($userId) use($app) {
	$app->response->headers->set('Content-Type', 'application/json');
	$file = new \Upload\File('profile_pic', $app->storage);
	$newFilename = uniqid();
	$file->setName($newFilename);

	// Validate file
	// MimeType List => http://www.webmaster-toolkit.com/mime-types.shtml
	$file->addValidations([
		new \Upload\Validation\Mimetype(['image/png', 'image/jpeg']),
		new \Upload\Validation\Size('5M'),
	]);
	$response = ['message' => null, 'errors' => null];
	try {
		$response['message'] = [
			'name' => $file->getNameWithExtension(),
			'mime' => $file->getMimetype(),
			'size' => $file->getSize(),
			'md5'  => $file->getMd5(),
			'dimensions' => $file->getDimensions()
		];
		$file->upload();
		$app->response->setStatus(201);
	} catch (\Exception $e) {
		$response['errors'] = $file->getErrors();
		$response['message'] = null;
		$app->response->setStatus(200);
	}
	echo json_encode($response);
});

$app->get('/file-upload', function () {
	include_once 'file_share_form.php';
});

$app->post('/file-upload', function () use($app) {
	$app->response->headers->set('Content-Type', 'application/json');
	$response = ['message' => [], 'errors' => null];
	foreach ($_FILES as $key => $data) {
		$file = new \Upload\File($key, $app->storage);
		$file->setName(uniqid());
		// Validate file
		// MimeType List => http://www.webmaster-toolkit.com/mime-types.shtml
		$file->addValidations([
			new \Upload\Validation\Mimetype(['image/png', 'image/jpeg', 'application/pdf']),
			new \Upload\Validation\Size('5M'),
		]);
		try {
			array_push($response['message'], [
				'name' => $file->getNameWithExtension(),
				'mime' => $file->getMimetype(),
				'size' => $file->getSize(),
				'md5'  => $file->getMd5(),
				'dimensions' => $file->getDimensions()
			]);
			$file->upload();
			$app->response->setStatus(201);
		} catch (\Exception $e) {
			$response['errors'] = $file->getErrors();
			$app->response->setStatus(200);
			break;
		}
	}
	echo json_encode($response);
});

$app->run();

[/php]

<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>

<h2><a name="download"></a>5. Download</h2>
<div class="download"><strong>Download</strong><br> You can download the full source code of this example here: <a href="http://www.webcodegeeks.com/wp-content/uploads/2015/03/js-inheritance-example.zip"><strong>jQuery File Upload Example</strong></a></div>
<sub style="vertical-align: sub;font-size: smaller;"><a href="#toc">TOC</a></sub>