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