jQuery ajax file uploader widget!
|A lightweight and highly configurable jQuery plugin for async file uploading via Ajax! The jQuery ajax file uploader plugin includes support for queues, progress tracking and drag and drop.
Solution of jQuery ajax file uploader
A jQuery plugin for file uploading using Ajax.
Very configurable and easy to adapt to any Frontend design, and very easy to work along side any backend logic. The focus will be modern browsers, but also providing a method to know when the plugin is not supported. The idea is to keep it simple and lightweight.
Basic Javascript knowledge is necessary to setup this plugin: how to set settings, callback events, etc.

Setup
# NPM npm install dm-file-uploader --save # Bower bower install dm-file-uploader --save
Sample
This is the simple html markup. The file input is optional but it provides an alternative way to select files for the user(check the online demo to see how to hide/style it).
<div id="drop-area"> <h3>Drag and Drop Files Here<h3/> <input type="file" title="Click to add Files"> </div>
Initialization
$("#drop-area").dmUploader({ url: '/path/to/backend/upload.asp', //... More settings here... onInit: function(){ console.log('Callback: Plugin initialized'); } // ... More callbacks });
Additionally, after initialization you can use any of the available Methods to interact with the plugin.
License: MIT
GitHub
https://github.com/danielm/uploader
Demo
https://danielmg.org/demo/java-script/uploader/basic
See also
Smart Wizard – a jQuery form wizard plugin
JavaScript file upload library – filepond JS, with adapters for Vue and React JS!
Dropzone.js – drag and drop JavaScript file uploader
Responsive HTML tables on all devices with jQuery table-shrinker
Human readable file size in JavaScript
AJAX PayPal – shopping cart jQuery plugin
Enjoy!