一个高级的多文件选择jQuery插件，主要通过3个有用的文件选择验证器来增强本地文件输入：

• 限制允许选择的最大文件数。
• 限制某些文件扩展名/格式。
• 允许您设置上传大小限制。

更多功能：

• 图像预览。
• 支持多种语言的错误反馈。
• 自定义文件列表。
• 选择和验证事件处理程序。
• 使用本地HTML5文件输入。

如何使用它:

1.在加载jquery库之后，加载jquery.MultiFile.js脚本，我们就可以开始了。

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

2.限制允许选择的最大文件数。

<!-- Using maxlength attribute -->
<input type="file"
       class="multi"
       maxlength="3"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi max-3"
/>

// Or Via JavaScript
$('#yourInput').MultiFile(3);

// Or
$('#yourInput').MultiFile({
  max: 3
});

3.限制某些文件扩展名/格式。

<!-- Using accept attribute -->
<input type="file"
       class="multi"
       accept="gif|jpg"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi accept-gif|jpg"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  accept: 'gif|jpg|png'
});

4.设置上传大小限制。

<!-- Using data-maxsize attribute (under <1MB in total) -->
<input type="file"
       class="multi"
       data-maxsize="1024"
/>

<!-- Using data-maxsize attribute (under <1MB each) -->
<input type="file"
       class="multi"
       data-maxfile="1024"
/>

<!-- Or Using CSS classes -->
<input type="file"
       class="multi maxsize-1024"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  max_size: 1024
});

5.在上传之前启用图像预览功能。

<input type="file"
       multiple
       class="multi with-preview"
/>

// Or Via JavaScript
$('#yourInput').MultiFile({
  preview: true,
  previewCss: 'max-height:100px; max-width:100px;',
});

6.显示给定容器中的选定文件。

<div id="myList"></div>

$('#yourInput').MultiFile({
  list: '#myList'
});

7.具有默认值的完整插件选项。

$('#yourInput').MultiFile({
  accept: '', // accepted file extensions
  max: -1, // maximum number of selectable files
  maxfile: -1, // maximum size of a single file
  maxsize: -1, // maximum size of entire payload

  // name to use for newly created elements
  namePattern: '$name', // same name by default (which creates an array)
  /*master name*/ // use $name
  /*master id */ // use $id
  /*group count*/ // use $g
  /*slave count*/ // use $i
  /*other  */ // use any combination of he above, eg.: $name_file$i

  // previews
  preview: false,
  previewCss: 'max-height:100px; max-width:100px;',

  // what text to display between file names
  separator: ', ', // string or false

  // STRING: collection lets you show messages in different languages
  STRING: {
    remove: 'x',
    denied: 'You cannot select a $ext file.\nTry again...',
    file: '$file',
    selected: 'File selected: $file',
    duplicate: 'This file has already been selected:\n$file',
    toomuch: 'The files selected exceed the maximum size permited ($size)',
    toomany: 'Too many files selected (max: $max)',
    toobig: '$file is too big (max $size)'
  },

  // name of methods that should be automcatically intercepted so the plugin can disable
  // extra file elements that are empty before execution and automatically re-enable them afterwards
  autoIntercept: ['submit', 'ajaxSubmit', 'ajaxForm', 'validate', 'valid' /* array of methods to intercept */ ],
});

8.发生错误时执行回调函数。

$('#yourInput').MultiFile({
  error: function (s) {
    if(typeof console != 'undefined') console.log(s);
      alert(s);
  }
});

9.所有可能的事件处理程序。

$('#yourInput').MultiFile({
  onFileRemove: function(element, value, master_element) {
    $('#output').append('<li>onFileRemove - ' + value + '</li>')
  },
  afterFileRemove: function(element, value, master_element) {
    $('#output').append('<li>afterFileRemove - ' + value + '</li>')
  },
  onFileAppend: function(element, value, master_element) {
    $('#output').append('<li>onFileAppend - ' + value + '</li>')
  },
  afterFileAppend: function(element, value, master_element) {
    $('#output').append('<li>afterFileAppend - ' + value + '</li>')
  },
  onFileSelect: function(element, value, master_element) {
    $('#output').append('<li>onFileSelect - ' + value + '</li>')
  },
  afterFileSelect: function(element, value, master_element) {
    $('#output').append('<li>afterFileSelect - ' + value + '</li>')
  },
  onFileInvalid: function(element, value, master_element) {
    $('#output').append('<li>onFileInvalid - ' + value + '</li>')
  },
  onFileDuplicate: function(element, value, master_element) {
    $('#output').append('<li>onFileDuplicate - ' + value + '</li>')
  },
  onFileTooMany: function(element, value, master_element) {
    $('#output').append('<li>onFileTooMany - ' + value + '</li>')
  },
  onFileTooBig: function(element, value, master_element) {
    $('#output').append('<li>onFileTooBig - ' + value + '</li>')
  },
  onFileTooMuch: function(element, value, master_element) {
    $('#output').append('<li>onFileTooMuch - ' + value + '</li>')
  }
});

更新日志：

2022-12-14

• 提交前将主文件输入设为可选

2022-11-12

• 建议更改为忽略accept属性中的mime类型定义

预览截图

多文件上传验证插件 多文件