jQuery Multiple Image Upload with Preview and Delete

A lightweight jQuery plugin that lets you to create multiple image upload with preview and delete feature. The plugin supports drag & drop functionality to upload multiple images. It uses a static HTML form without using AJAX that hold images before upload.

Users can drag multiple images in HTML (upload) form and see image thumbnail before upload. Moreover, the plugin can be fully customized according to your needs.

Plugin Overview and Preview

Plugin: image-uploader
Author: christianbayer
Category: Text & Input
Published: July 21, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 13 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
4,253 views

Code Rating

4.5
4.5 rating
4.5 out of 5 stars (based on 4 reviews)
Excellent50%
Very good50%
Average0%
Poor0%
Terrible0%

How to Use Multiple Image Uploader with Preview & Delete

1. First of all load jQuery and Google Material Icons fonts into your HTML page to getting started with Image-Uploader plugin.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   
<!--Material Design Iconic Font-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. After that, also include Image-Uploader‘s CSS and JavaScript file.

<!-- Image Uploader CSS -->
<link rel="stylesheet" href="dist/image-uploader.min.css">

<!-- Image Uploader Js -->
<script type="text/javascript" src="dist/image-uploader.min.js"></script>

3. Create an HTML form with attribute enctype="multipart/form-data" that contains div for simple image uploading feature.

<form action="http://example.com/post" enctype="multipart/form-data">

   <div class="input-images"></div>

</form>

3.1 The following is the complete HTML structure for image preview and delete before uploaded.

<form method="POST" name="form-example-2" id="form-example-2" enctype="multipart/form-data">

    <div class="input-field">
        <input type="text" name="name-2" id="name-2" value="John Doe">
        <label for="name-2" class="active">Name</label>
    </div>

    <div class="input-field">
        <input type="text" name="description-2" id="description-2"
        value="This form is already filed with some data, including images!">
        <label for="description-2" class="active">Description</label>
    </div>

    <div class="input-field">
        <label class="active">Photos</label>
        <div class="input-images-2" style="padding-top: .5rem;"></div>
    </div>

    <button>Submit and display data</button>

</form>

4. Finally, initialize the plugin in jQuery document ready function to active jQuery multiple image upload with preview and delete feature.

$(document).ready(function(){

   $('.input-images').imageUploader();

});

For more advance usage, please check the Configuration Options tab.

Advance Configuration Options for Multiple Image Upload with Preview and Delete

The following are some advance configuration options to create / customize “multiple image upload with preview and delete”.

Option Description, Default, Type
label

This option define the label text for draggable area that helps users to understand what to do. Default: ‘Drag & Drop files here or click to browse’, Type: String.

$('.input-images').imageUploader({
  label: 'Drag & Drop files here or click to browse',
});
preloaded

Define the pre loaded images for upload form. Defult: [], Type: Array of Objects.

$('.input-images').imageUploader({
   preloaded: [
    {id: 1, src: 'https://picsum.photos/500/500?random=1'},
    {id: 2, src: 'https://picsum.photos/500/500?random=2'},
   ];
});
imagesInputName

It define the name of the input that will be posted, containing the files list. Default: ‘images’, Type: String.

$('.input-images').imageUploader({
   imagesInputName: 'Custom Name',
});
preloadedInputName

Show name of the inputs that will be posted, containing the preloaded images identification. Default: ‘preloaded’, Type: String.

$('.input-images').imageUploader({
   preloadedInputName: 'Custom Name',
});

Changelog

27/11/2019

  • Fixed material icons dependency.
  • Bugs fixed.

7/11/2019

  • Updated.

6/11/2019

  • Added max files validation.
  • Removed ‘validateExtension’ option.

16/07/2019

  • Initial release.

Excelent!!!

5.0 rating
November 24, 2019

Completely light and amazing folks!!!

Newton

clear button not working

4.0 rating
November 11, 2019

Once you uploaded an image and then clear it, still you will receive the value when form submit. how can I solve it

Asif

Its Amazing

5.0 rating
November 6, 2019

I used this plugin in one of my project and its work perfect.

Olivia Jade

Good

4.0 rating
October 3, 2019

Thanks for this.

John Doe

Submit Your Review