Multiple Image Picker Plugin With jQuery - Spartan

Multiple Image Picker Plugin With jQuery - Spartan

Spartan is an easy-to-use jQuery image picker plugin which enables the user to pick multiple images from the client side with support for live preview.

Can be used as a user-friendly file picker for image uploading. Easy to customize and stylize with any CSS framework like Bootstrap.

1. In this example, we're going to use Bootstrap framework for the styling of the image picker.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">

2. Include jQuery library and the spartan-multi-image-picker.min.js script at the bottom of your webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="spartan-multi-image-picker.min.js"></script>

3. The HTML for the image picker.

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-3">Upload Image</label>
    <div class="col-md-8">
      <div class="row">
        <div id="demo"></div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-3"></label>
    <div class="col-md-8">
      <input type="submit" class="btn btn-primary" value="Send">
    </div>
  </div>
</div>

4. Call the function spartanMultiImagePicker and specify the field name as follows. In this example this will append <input type="file" name="fileUpload[]"> to your html form.

$("#demo").spartanMultiImagePicker({
  fieldName:  'fileUpload[]'
});

5. Specify the maxmimum number of images files allowed to select.

$("#demo").spartanMultiImagePicker({
  fieldName:  'fileUpload[]',
  maxCount : 10
});

6. Customize the image picker slot.

$("#demo").spartanMultiImagePicker({
  rowHeight : '200px',
  groupClassName : 'col-md-4 col-sm-4 col-xs-6'
});

7. Customize placeholder image.

$("#demo").spartanMultiImagePicker({
  placeholderImage: {
    image : ADDICON,
    width : '64px'
  },
});

8. Set the file types allowed to upload.

$("#demo").spartanMultiImagePicker({
  allowedExt: 'png|jpg|jpeg|gif'
});

9. Callback functions.

$("#demo").spartanMultiImagePicker({
  onAddRow:          function() {},
  onRenderedPreview: function() {},
  onRemoveRow:       function() {},
  onExtensionErr:    function() {}
});

This awesome jQuery plugin is developed by adispartadev. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 29.04.2018
  • Source