jQuery Multiple Image Upload with Preview and Delete

July 21, 2019 admin Others, Text & Input 0

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 Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin: image-uploader
Author: christianbayer
Licence: MIT Licence
Published: July 21, 2019
Repository: Fork on GitHub
Dependencies: jQuery 3.2.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 13.1 KB
Demo Download

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();

});

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',
});

Related jQuery Plugins: