5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning and alerts.
5x5jqpi.js is an advanced drag-and-drop file uploader built on the jQuery and Bootstrap framework.
Features:
- Choose files by drag and drop.
- Select multiple files simultaneously.
- Add custom file descriptions.
- Custom file type.
- Limit files and size.
- Feedback on the error.
How to make use of it:
1. Load the wanted jQuery and Bootstrap framework within the doc.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Create an empty container for the file uploader.
<div id="uploader"></div>
3. Download the plugin and insert the 5x5jqpi.min.js
after jQuery.
<script src="./dist/5x5jqpi.min.js"></script>
4. Initialize the file uploader and decide the destination to which the files must be sent.
$("#uploader").initUploader({ destination:'/path/to/server/', destinationParams: { // uploader parameters here } });
5. Determine whether to allow the user to outline customized descriptions for every file.
$("#uploader").initUploader({ showDescription: true });
6. Set the utmost variety of files allowed to add at a time.
$("#uploader").initUploader({ fileLimit: 10 });
7. Set the utmost file size.
$("#uploader").initUploader({ sizeLimit: 1000 // 1G });
8. Create customized file types in a JS object.
$("#uploader").initUploader({ selectOpts: { one: '1', two: '2', three: '3' }, });
9. Execute a callback after the files have been uploaded.
$("#uploader").initUploader({ postFn: $.noop });
Advanced Drag’n’drop File Uploader, 5x5_jq_uploader Plugin/Github
See Demo And Download
Official Website(cesperian): Click Here
This superior jQuery/javascript plugin is developed by cesperian. For extra Advanced Usages, please go to the official website.