Drag And Drop AJAX Uploader Plugin - jQuery File Uploader

File Size: 25.3 KB
Views Total: 14196
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Drag And Drop AJAX Uploader Plugin - jQuery File Uploader

The jQuery File Uploader transforms the normal file input into a drag and drop file uploader with ajax upload, image preview and progress bar support.

How to use it:

1. The required markup for the file uploader.

<div id="drag-and-drop-zone" class="uploader">
  <div>Drag &amp; Drop Images Here</div>
  <div class="or">-or-</div>
  <div class="browser">
      <span>Click to open the file Browser</span>
      <input type="file" name="files[]" multiple title='Click to add Files'>

2. Create an empty container to display the files.

<div id="fileList">

  <!-- Files will be places here -->


3. Inert both jQuery library and the dmuploader.min.js script at the bottom of the document.

<script src="dmuploader.min.js"></script>

4. The example JavaScript to activate the file uploader.

  url: 'upload.php'

5. The example upload.php.


echo json_encode(array('status' => 'ok'));


6. Config the file uploader with the following options.

  method: 'POST',
  extraData: {},
  maxFileSize: 0,
  maxFiles: 0,
  allowedTypes: '*',
  extFilter: null,
  dataType: null,
  fileName: 'file',

7. Event handlers available.

  onInit: function(){},
  onFallbackMode: function(message) {},
  onNewFile: function(id, file){},
  onBeforeUpload: function(id){},
  onComplete: function(){},
  onUploadProgress: function(id, percent){},
  onUploadSuccess: function(id, data){},
  onUploadError: function(id, message){},
  onFileTypeError: function(file){},
  onFileSizeError: function(file){},
  onFileExtError: function(file){},
  onFilesMaxError: function(file){}

Change log:


  • Code clean up

This awesome jQuery plugin is developed by danielm. For more Advanced Usages, please check the demo page or visit the official website.