Simple jQuery File Upload SimpleUpload.js

Posted on September 29, 2019 at 5:25 pm

Today I found this awesome jQuery file upload plugin:

http://simpleupload.michaelcbrook.com/

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

https://github.com/michaelcbrook/simpleUpload.js

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

https://www.jsdelivr.com/package/npm/jquery-simple-upload

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

The JavaScript section looks like this:

$(document).ready(function(){
 
	$('input[type=file]').change(function(){
 
		$(this).simpleUpload("/ajax/upload.php", {
 
			start: function(file){
				//upload started
				$('#filename').html(file.name);
				$('#progress').html("");
				$('#progressBar').width(0);
			},
 
			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.name + ": " + 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.

http://simpleupload.michaelcbrook.com/

Receive updates via email

Other Posts

Updated Posts