Simple HTML5 file uploader created as a plugin for jQuery.
Install the package with npm
npm install jquery.uploader
Include jquery.uploader script and stylesheets in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example:
Stylesheets:
Include the jquery.uploader stylesheets into head.
<link href="./css/jquery.uploader.css" type="text/css" rel="stylesheet">
Scripts:
Include the jQuery library and jquery.uploader script file in your html page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.uploader.min.js"></script>
HTML:
Create a simple form with an input file element.
<form action="./php/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" multiple="multiple">
<input type="submit" value="Submit">
</form>
Javascript:
The plugin is named "uploader" and can be applied to any element. If you are not familiar with jQuery, please, read this tutorial for beginners.
$(document).ready(function() {
$(':input[type="file"]').uploader();
});
Result:
Here is the result of our effort.