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.

Features:

• 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">
      </div>
      <input class="button button--big-bottom" type="submit" value="Upload Selected Files">
  </form>
</div>

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

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.imageuploader.js"></script>

4. Initialize the plugin with default options.

var options = {};
$('.js-uploader__box').uploader(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:

2018-01-23

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