Press "Enter" to skip to content

Single and Multiple Media/Image Selector From Gallery with Javascript/Jquery

JS Media Selector is a single and multiple media/image selector from gallery using Javascript/Jquery.

multiple image select android github, select multiple image from gallery and show them in a gridview, select multiple images from gallery android example, how to display multiple images in imageview in android

Features

  • Select single/multiple photo
  • Get the image ID specified by a comma separated or array and pass it to the server
  • Single/Multiple selection quick toggle
  • Get the delimited element as an array/comma separated string
  • Server-side data can be sent easily

How to make use of it:

1. Insert images with verification codes into labels using CSS class of Image Selection Box (use Font Awesome in this example).

<label class="image-checkbox">
  <img su-media-id="jquery" src="1.jpg" />
  <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
  <img su-media-id="script" src="2.jpg" />
  <i class="fa fa-check"></i>
</label>
<label class="image-checkbox">
  <img su-media-id="net" src="3.jpg" />
  <i class="fa fa-check"></i>
</label>
...

2. Create a normal checkbox to switch between single selection and multiple selection.

<input type="checkbox" class="custom-control-input" id="allowmultiple">
<label class="custom-control-label" for="allowmultiple" style="cursor: pointer;">
  Multiple Select
</label>

3. Create a result container in which the media selector returns a JSON string containing the image IDs you specify.

<div id="selectedmediapreview"></div>

4. CSS needed to design the image checkboxes.

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 4px #ccc;
  outline: 0;
  margin: 4px;
  border-radius: 12px;
}

.image-checkbox-checked {
  border-color: #2196f3;
}

img {
  border-radius: 8px;
  max-height: 160px !important;
  max-width: -webkit-fill-available;
}

.image-checkbox i {
  display: none;
  color: #2196f3;
}

.image-checkbox-checked {
  position: relative;
}

.image-checkbox-checked i {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
}

5. Load the necessary jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

6. The main javascript (jQuery script) to enable the image selector.

jQuery(function ($) {
  var mediaArray = [];
  var selectedMediasId;
  var isMultipleAllowed = false;
  $('#allowmultiple').click(function () {
      isMultipleAllowed = $('#allowmultiple').is(':checked') ? true : false;
      $('.image-checkbox-checked').each(function () {
          $(this).removeClass('image-checkbox-checked');
      });
      mediaArray = [];
      $('#selectedmediapreview').html('');
  });
  $(".image-checkbox").on("click", function (e) {
      var selected = $(this).find('img').attr('su-media-id');
      //console.log(selected);
      if ($(this).hasClass('image-checkbox-checked')) {
          $(this).removeClass('image-checkbox-checked');
          // remove deselected item from array
          mediaArray = $.grep(mediaArray, function (value) {
              return value != selected;
          });
      }
      else {
          if (isMultipleAllowed == false) {
              $('.image-checkbox-checked').each(function () {
                  $(this).removeClass('image-checkbox-checked');
              });
              mediaArray = [];
              mediaArray.push(selected);
          } else {
              if (mediaArray.indexOf(selected) === -1) {
                  mediaArray.push(selected);
              }
          }
          $(this).addClass('image-checkbox-checked');
      }
      //console.log(selected);
      console.log(mediaArray);
      selectedMediasId = mediaArray.join(",");
      console.log(selectedMediasId);
      $('#selectedmediapreview').html('<div class="alert alert-success"><pre lang="js">' + JSON.stringify(mediaArray.join(", "), null, 4) + '</pre></div>');
      //console.log(isMultipleAllowed);
      e.preventDefault();
  });
});

Single/Multiple Image Selector In jQuery, JS Media Selector Plugin/Github, pick multiple images in android, android select multiple image from gallery and upload to server


See Demo And Download

Official Website(devsharif): Click Here

This superior jQuery/javascript plugin is developed by devsharif. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *