Simple jQuery File Upload SimpleUpload.js

Posted on September 29, 2019 at 5:25 pm

Today I found this awesome jQuery file upload plugin:

The official simpleUpload.js jQuery plugin page on Github is this:

The plugin is hosted by Content Delivery Network (CDN) JsDelivr:

Below there is an example to use the jQuery plugin showing a progress bar.

The JavaScript section looks like this:

		$(this).simpleUpload("/ajax/upload.php", {
			start: function(file){
				//upload started
			progress: function(progress){
				//received progress
				$('#progress').html("Progress: " + Math.round(progress) + "%");
				$('#progressBar').width(progress + "%");
			success: function(data){
				//upload successful
				$('#progress').html("Success!<br>Data: " + JSON.stringify(data));
			error: function(error){
				//upload failed
				$('#progress').html("Failure!<br>" + + ": " + error.message);

The HTML section looks like this:

<div id="filename"></div>
<div id="progress"></div>
<div id="progressBar"></div>
<input type="file" name="file">

The server-side PHP script looks like this:

// We'll output data in JSON format
header("Content-Type: application/json; charset=utf-8");
// All of your application logic with $_FILES["file"] goes here
// $output will be converted into JSON
if ($success) {
	$output = array("success" => true, "message" => "Success!");
} else {
	$output = array("success" => false, "error" => "Failure!");
// Convert $output into JSON
echo json_encode($output);

You can change file upload button like this:

<style>.box{display:inline-block;width:70px;height:70px;background-color:white;border:4px dashed #b5b5b5;color:#b5b5b5;font-size:50px;text-align:center;padding:30px}</style>
<label for="file"><div class="box">+</div></label>
<input type="file" id="file" name="file" style="display: none;">

It is small, fast, simple and very easy to use!

It also support multiple file uploads and much more.

Receive updates via email

Other Posts

Updated Posts