Bootstrap Multiple Image Upload with Preview and Delete | ImagesLoader

ImagesLoader is a standard bootstrap image upload plugin that provides an easy-to-use and nice-looking interface for uploading multiple images to a web server.

Must Read: HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

How to make use of it:

1. Load the jQuery library, Bootstrap 4 framework, and Font Awesome iconic font.

<link rel="stylesheet" href="" crossorigin="anonymous">

  <!-- Format Images loader CSS -->
  <link rel="stylesheet" href="./jquery.imagesloader.css">

  <!-- jQuery -->
  <script src="" crossorigin="anonymous"></script>

  <!-- Bootstrap JS -->
  <script src="" crossorigin="anonymous"></script>

  <!-- Font awesome -->
  <script src="" crossorigin="anonymous"></script>

  <!-- Images loader -->
  <script src="./jquery.imagesloader-1.0.1.js"></script>


<div class="container col-8 pt-5">

    <form id="frm" method="post" class="needs-validation" novalidate="">

      <!--Image Upload-->
      <div class="row mt-3 mb-2">

        <div class="col-12 pr-0 text-left">
          <label for="Images" class="col-form-label text-nowrap"><strong>Images loader</strong></label>

      <!--Image container -->
      <div class="row"
           data-errorformat="Accepted file formats"
           data-errorsize="Maximum size accepted"
           data-errorduplicate="File already loaded"
           data-errormaxfiles="Maximum number of images you can upload"
           data-errorminfiles="Minimum number of images to upload"
           data-modifyimagetext="Modify immage">

        <!-- Progress bar -->
        <div class="col-12 order-1 mt-2">
          <div data-type="progress" class="progress" style="height: 25px; display:none;">
            <div data-type="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 100%;">Load in progress...</div>

        <!-- Model -->
        <div data-type="image-model" class="col-4 pl-2 pr-2 pt-2" style="max-width:200px; display:none;">

          <div class="ratio-box text-center" data-type="image-ratio-box">
            <img data-type="noimage" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="./img/photo-camera-gray.svg" style="cursor:pointer;">
            <div data-type="loading" class="img-loading" style="color:#218838; display:none;">
              <span class="fa fa-2x fa-spin fa-spinner"></span>
            <img data-type="preview" class="btn btn-light ratio-img img-fluid p-2 image border dashed rounded" src="" style="display: none; cursor: default;">
            <span class="badge badge-pill badge-success p-2 w-50 main-tag" style="display:none;">Main</span>

          <!-- Buttons -->
          <div data-type="image-buttons" class="row justify-content-center mt-2">
            <button data-type="add" class="btn btn-outline-success" type="button"><span class="fa fa-camera mr-2"></span>Add</button>
            <button data-type="btn-modify" type="button" class="btn btn-outline-success m-0" data-toggle="popover" data-placement="right" style="display:none;">
              <span class="fa fa-pencil-alt mr-2"></span>Modify

        <!-- Popover operations -->
        <div data-type="popover-model" style="display:none">
          <div data-type="popover" class="ml-3 mr-3" style="min-width:150px;">
            <div class="row">
              <div class="col p-0">
                <button data-operation="main" class="btn btn-block btn-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-double-up mr-2"></span>Main</button>
            <div class="row mt-2">
              <div class="col-6 p-0 pr-1">
                <button data-operation="left" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fa fa-angle-left mr-2"></span>Left</button>
              <div class="col-6 p-0 pl-1">
                <button data-operation="right" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Right<span class="fa fa-angle-right ml-2"></span></button>
            <div class="row mt-2">
              <div class="col-6 p-0 pr-1">
                <button data-operation="rotateanticlockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button"><span class="fas fa-undo-alt mr-2"></span>Rotate</button>
              <div class="col-6 p-0 pl-1">
                <button data-operation="rotateclockwise" class="btn btn-block btn-outline-success btn-sm rounded-pill" type="button">Rotate<span class="fas fa-redo-alt ml-2"></span></button>
            <div class="row mt-2">
              <button data-operation="remove" class="btn btn-outline-danger btn-sm btn-block" type="button"><span class="fa fa-times mr-2"></span>Remove</button>


      <div class="form-group row">
        <div class="input-group">
          <!--Hidden file input for images-->
          <input id="files" type="file" name="files[]" data-button="" multiple="" accept="image/jpeg, image/png, image/gif," style="display:none;">


    <div class="row mt-2">
      <div class="col-md-4 offset-md-8 text-center mb-4">
        <button id="btnContinue" type="submit" form="frm" class="btn btn-block btn-outline-success float-right" data-toggle="tooltip" data-trigger="manual" data-placement="top" data-title="Continue">
          Continue<span id="btnContinueIcon" class="fa fa-chevron-circle-right ml-2"></span><span id="btnContinueLoading" class="fa fa-spin fa-spinner ml-2" style="display:none"></span>

<!-- Custom javascript -->
  <script type="text/javascript">

    // Ready
    $(document).ready(function () {

      //Image loader var to use when you need a function from object
      var auctionImages = [{"Url":"./img/Nespresso001.jpg","Name":"Nespresso001"},{"Url":"./img/Nespresso002.jpg","Name":"Nespresso002"}];

      // Create image loader plugin
      var imagesloader = $('[data-type=imagesloader]').imagesloader({
        maxFiles: 4
        , minSelect: 1
        , imagesToLoad: auctionImages

      $frm = $('#frm');

      // Form submit
      $frm.submit(function (e) {

        var $form = $(this);

        var files ='format.imagesloader').AttachmentArray;

        var il ='format.imagesloader');

        if (il.CheckValidity())
          alert('Upload ' + files.length + ' files');        




See Also –

Drag and Drop File Upload Plugin for Bootstrap 4 | bs-dropzone.js
jQuery Plugin for a Filterable Multi-Selection Bootstrap Dropdown
Dropdown Menu with Multiple Select and Searching Support | JS Select

See Demo And Download


Official Website(ITformat): Click Here

This superior jQuery/javascript plugin is developed by ITformat. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…