jQuery Multiple Image Upload with Preview and Delete

Category: Text & Input | December 3, 2019
jQuery Multiple Image Upload with Preview and Delete
Author: christianbayer
Official Page: Go to Website
Last Update:December 3, 2019
License:MIT

It’s a simple Drag & Drops image uploader plugin that lets you create jQuery Multiple Image Upload with Preview and Delete functionality. The uploader plugin made to be used in forms without AJAX.

Furthermore, it holds the images before uploading them into the server. When you drag and drop the multiple images, you will see the image thumbnails before uploading them.

Moreover, the plugin is lightweight and works well on mobile devices. You can easily customize it according to your needs.

It supports additional fields such as title and description so you can create a complete form with additional information.

How to Create jQuery Multiple Image Upload with Preview and Delete

The first thing you need to load the jQuery and Google Material Icons to into your web page to make work the jQuery Multiple file upload Plugin. Just add the files before closing head the tag.

<!-- 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">

After that, it also includes Image-Uploader CSS and JavaScript files.

<!-- 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>

Now create the HTML structure which is simple and easy to do. All you need to create the form attribute with enctype="multipart/form-data" and define a div  with a class name input-images

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

But if you want to create additional fields such as title and description that we have done in the demo then follow 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>

The Javascript

The last and most important part to initialize the plugin in jQuery document ready function to active jQuery multiple image uploads with preview and delete features.

$(document).ready(function(){
   $('.input-images').imageUploader();
});

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

OptionDescription, Default, Type
labelThis option defines the label text for the 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',
});
preloadedDefine the pre loaded images for upload form. Default: [], 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'},
   ];
});
imagesInputNameIt defines the name of the input that will be posted, containing the files list. Default: ‘images’, Type: String.

$('.input-images').imageUploader({
   imagesInputName: 'Custom Name',
});
preloadedInputNameShow the name of the inputs that will be posted, containing the identification of the preloaded image. Default: ‘preloaded’, Type: String.

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

F

27/11/2019

  • Fix the material icons dependency issue.
  • Bugs some fixed.

7/11/2019

  • Updated.

6/11/2019

  • Added Max files validation.
  • Removed the ‘validate extension’ option.

16/07/2019

  • Initial version release.

You May Also Like

7 thoughts on “jQuery Multiple Image Upload with Preview and Delete”

  1. I used this project in my project. its working in chrome and firefox. Not working in IE and some other browser. So Please fix it.

    Reply
    • Hi Cubecodex!
      Make sure the jQuery library is loading properly. Follow the plugin integration guide carefully and also check the console log for errors.

      Reply
  2. Hi, Thanks for this good tutorial.
    Can you please add image crop feature during upload or after upload user can choose to crop and add.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.