jQuery Multiple Image Upload with Preview and Delete

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

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

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

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

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