jQuery Ajax drag and drop File up loader with Progress bar

If you are looking for quick jQuery Ajax drag and drop File uploader with progress bar. Here I am going to share simple lightweight jQuery plugin developed by Daniel Morales to create drag and drop File uploader with progress bar. JQuery plugin to drag and drop files, including ajax upload and progress bar. The idea for this plugin is to keep it very simple; If you have just basic knowledge of jQuery and callback methods then you can use this plugin on your web based projects.

Integrate jQuery Ajax drag and drop File uploader with progress bar

Libraries

Include latest jquery core library with bootstrap library after that add plugin minified jqyery library dmuploader.min.js

<!--CSS-->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="dmuploader.min.js"></script>

<div id="drop-area-div" style="width:400px;height:300px;">
  Drag and Drop Files Here<br />
  or click to add files using the input<br />
  <input type="file" name="files[]" multiple="multiple" title="Click to add Files">
</div>

<div id="fileList">
 
  <!-- uploaded file history will be display here -->
 
</div>

$(function() {   
 $('#drop-area-div').dmUploader({
  url: 'upload.php'
 });
});

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