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">
    <label>
      <span>Click to open the file Browser</span>
      <input type="file" name="files[]" multiple title='Click to add Files'>
    </label>
  </div>
</div>

2. Create an empty container to display the files.

<div id="fileList">

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

</div>

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.

$('#drag-and-drop-zone').dmUploader({
  url: 'upload.php'
});

5. The example upload.php.

<?php

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

?>

6. Config the file uploader with the following options.

$('#drag-and-drop-zone').dmUploader({
  method: 'POST',
  extraData: {},
  maxFileSize: 0,
  maxFiles: 0,
  allowedTypes: '*',
  extFilter: null,
  dataType: null,
  fileName: 'file',
});

7. Event handlers available.

$('#drag-and-drop-zone').dmUploader({
  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:

2018-01-17

• 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.