Multiple File Upload Validation Plugin - Multifile
File Size: | 98.5 KB |
---|---|
Views Total: | 7562 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

An advanced multiple file selection jQuery plugin that chiefly enhances the native file input with 3 useful file select validators:
- Limits the max number of files allowed to select.
- Restricts certain file extensions/formats.
- Allows you to set the upload size limit.
More Features:
- Image preview.
- Error feedback with multi-language support.
- Custom file list.
- Selection & Validation event handlers.
- Works with the native HTML5 file input.
How to use it:
1. Load the jquery.MultiFile.js script after loading jQuery library and we're ready to go.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/jquery.MultiFile.js"></script>
2. Limit the max number of files allowed to select.
<!-- 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. Restrict certain file extensions/formats.
<!-- 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. Set the upload size limit.
<!-- 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. Enable the image preview functionality before uploading.
<input type="file" multiple class="multi with-preview" />
// Or Via JavaScript $('#yourInput').MultiFile({ preview: true, previewCss: 'max-height:100px; max-width:100px;', });
6. Shows selected files in a given container.
<div id="myList"></div>
$('#yourInput').MultiFile({ list: '#myList' });
7. Full plugin options with default values.
$('#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. Execute a callback function when an error occured.
$('#yourInput').MultiFile({ error: function (s) { if(typeof console != 'undefined') console.log(s); alert(s); } });
9. All possible event handlers.
$('#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>') } });
Changelog:
2022-12-14
- Make main file input optional before submitting
2022-11-12
- proposed change to ignore mime type definitions in accept attribute
This awesome jQuery plugin is developed by fyneworks. For more Advanced Usages, please check the demo page or visit the official website.