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 and drag'n'drop.

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

How to use it:

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="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/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. Set the max file size.

$("#demo").spartanMultiImagePicker({
  maxFileSize: '',
});

10. Callback functions.

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

11. Customize the label for the drag'n'drop area.

$("#demo").spartanMultiImagePicker({
  dropFileLabel:    'Drop file here',
});

12. Possible options for the direct upload feature.

$("#demo").spartanMultiImagePicker({
  directUpload :  {
    loaderIcon: '<i class="fas fa-sync fa-spin"></i>',
    status:       false,
    url:          '',
    success:      function() {},
    error:        function() {}
  },
});

Changelog:

2022-06-14

• v2.0.1

2018-05-12

• Add Direct Upload Feature

2018-05-07

• Added drag and drop support.

2018-05-01

• Max file size validation
• Small bug fix on image validation

---

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