Spartan是一个易于使用的jQuery图像选择器插件，它允许用户从客户端拾取多个图像，并支持实时预览和拖放。

可作为用户友好的文件选择器用于图像上传。使用Bootstrap 5等任何CSS框架都可以轻松定制和风格化。

如何使用它:

1.在这个例子中，我们将使用Bootstrap框架来设计图像选择器的样式。

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

2.包括jQuery库和斯巴达式多图像打印机.min.js网页底部的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/spartan-multi-image-picker.min.js"></script>

3.用于图像选择器的HTML。

<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.调用函数备用多图像选取器并按如下方式指定字段名称。在本例中，这将附加<input type="file" name="fileUpload[]">到您的html表单。

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

5.指定允许选择的图像文件的最大数量。

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

6.自定义图像选择器插槽。

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

7.自定义占位符图像。

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

8.设置允许上传的文件类型。

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

9.设置最大文件大小。

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

10.回调函数。

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

11.自定义拖放区域的标签。

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

12.直接上传功能的可能选项。

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

更新日志：

2022-06-14

• v2.0.1版本

2018-05-12

• 添加直接上传功能

2018-05-07

• 增加了拖放支持。

2018-05-01

• 最大文件大小验证
• 图像验证的小错误修复

预览截图

jQuery 多图像选取器插件 Spartan