jQuery Multiple Image Upload

1. Introduction

Image-Uploader is a jQuery plugin for uploading images with adding and removing functionality. The plugin supports drag & drop to upload multiple files directly from the filesystem. Image-Uploader plugin comes with many great customization options and can be easily adapt to your needs.

2. Plugin Overview

Demo

3. How to install and use Image-Uploader jQuery plugin

Follow below steps in order to install Image-Uploader plugin on your website.

1. first, import the Image-Uploader's CSS file at the head along Material Icons for the icons

<!-- Material Icons -->
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<!-- Image Uploader CSS -->
<link type="text/css" rel="stylesheet" href="/image-uploader.min.css">

2. next, import the JS file at the end of the body, after the jQuery library

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Image Uploader JS file -->
<script type="text/javascript" src="/image-uploader.min.js"></script>

3. create a form with enctype="multipart/form-data" attributte

<form action="/post" enctype="multipart/form-data"></form>

4. inside the form, create a wrapper to the plugin

<div class="input-images"></div>

5. initialize Image-Uploader plugin with jQuery

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

6. complete form with two fields and image upload paner will have the following structure

<form method="POST" name="form-example-1" id="form-example-1" enctype="multipart/form-data">

    <div class="input-field">
        <input type="text" name="name-1" id="name-1">
        <label for="name-1">Name</label>
    </div>

    <div class="input-field">
        <input type="text" name="description-1" id="description-1">
        <label for="description-1">Description</label>
    </div>

    <div class="input-field">
        <label class="active">Photos</label>
        <div class="input-images-1" style="padding-top: .5rem;"></div>
    </div>

    <button>Submit and display data</button>
</form>

Initialization of Image-Uploader plugin transforms div panel into a fully functional multi uploader with adding and removing options. The plugin supports drag & drop files from the filesystem.

4. Conclusion

In this article, we showcased a jQuery plugin Image-Uploader used for uploading images selected from the filesystem. It supports drag and drop functionality and gives the possibility to preview the chosen images before upload.