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 holds 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:	8 months ago
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: 2 months ago @ 10:06 AM

MIT

Fork on GitHub

4,951

Demo Download Download Master Repository

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 the 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 Basically, 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 advanced usage, please check the Configuration Options tab.

Advanced Configuration Options for Multiple Image Upload with Preview and Delete

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

Option	Description, Default, Type
`label`	This option defines the label text for a 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 preloaded images for upload form. Default: [], 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 defines 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 the name of the inputs that will be posted, containing the identification of the preloaded image. Default: ‘preloaded’, Type: String. EXAMPLE $('.input-images').imageUploader({ preloadedInputName: 'Custom Name', });