Multiple File Upload Validation Plugin - Multifile

File Size: | 47.9 KB |
---|---|
Views Total: | 2875 |
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>') } });
This awesome jQuery plugin is developed by fyneworks. For more Advanced Usages, please check the demo page or visit the official website.