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

jQuery Multiple Image Upload with Preview and Delete

Last Modified: Nov 27, 2019 @ 11:54 AM

MIT

Fork on GitHub

4,253 views

Demo Download Download Master Repository

Code Rating

4.5

4.5 out of 5 stars (based on 4 reviews)

Excellent50%

Very good50%

Average0%

Poor0%

Terrible0%

Documentation
Configuration Options
Changelog
Developer Reviews

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. EXAMPLE $('.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. EXAMPLE $('.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. EXAMPLE $('.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. EXAMPLE $('.input-images').imageUploader({ preloadedInputName: 'Custom Name', });