jQuery Ajax drag and drop File uploader 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

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
 

<script src="//code.jquery.com/jquery-latest.min.js">script>
<script type="text/javascript" src="dmuploader.min.js">script>

HTML

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 se how to hide/style it)

Create an empty container to display the files.

="fileList">
 
  -- uploaded file history will be display here -->
 
>

JS

Call the plugin to upload file with progress.

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

You can also set the custom properties for your file uploader.

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

See live demo and download source code.

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.

Related