Multi-file Image Uploader Plugin With jQuery - Image Uploader

File Size: 14.3 KB
Views Total: 37030
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi-file Image Uploader Plugin With jQuery - Image Uploader

A jQuery plugin used to create an elegant uploader interface which allows to upload multiple image files to your web server via AJAX.


  • Allows to specify the image file formats to upload.
  • Image upload preview.
  • Allows to add new files via drag and drop.
  • Send files via ajax request containing the files as Formdata
  • Fully configurable and styleable.

Basic usage:

1. Load the style sheet styles.imageuploader.css to style the image uploader.

<link href="styles.imageuploader.css" rel="stylesheet">

2. Create the html for the image uploader.

<div class="uploader__box js-uploader__box l-center-box">
  <form action="your/nonjs/fallback/" method="POST">
      <div class="uploader__contents">
          <label class="button button--secondary" for="fileinput">Select Files</label>
          <input id="fileinput" class="uploader__file-input" type="file" multiple value="Select Files">
      <input class="button button--big-bottom" type="submit" value="Upload Selected Files">

3. Load jQuery library and the jquery.imageuploader.js in the footer to improve the page load speed.

<script src="//"></script>
<script src="jquery.imageuploader.js"></script>

4. Initialize the plugin with default options.

var options = {};

5. Config the image uploader with the following options.

var options = {
    submitButtonCopy: 'Upload Selected Files',
    instructionsCopy: 'Drag and Drop, or',
    furtherInstructionsCopy: 'Your can also drop more files, or',
    selectButtonCopy: 'Select Files',
    secondarySelectButtonCopy: 'Select More Files',
    dropZone: $(this),
    fileTypeWhiteList: ['jpg', 'png', 'jpeg', 'gif', 'pdf'],
    badFileTypeMessage: 'Sorry, we\'re unable to accept this type of file.',
    ajaxUrl: '/ajax/upload',
    testMode: false

Change log:


  • updating jquery, removing deprecated function call .size()

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