jquery.MultiFile - Javascript

jquery.MultiFile is a lightweight and easy-to-use plugin that allows users to select multiple files at once for uploading purposes. It requires jQuery 1.2.x or later and works in all major browsers including Internet Explorer 6 and above.

Features

• Supports multiple file selection
• Customizable file types and maximum number of files allowed
• Drag-and-drop file selection
• Real-time progress and file information display
• Client-side validation of file size and type
• Fine-grained control over individual files
• Easy integration with existing forms and file uploads

Installation

To use jquery.MultiFile in your project, simply include the following files in your HTML:

<script src="jquery.js"></script>
<script src="jquery.MultiFile.js"></script>

Basic Usage

Using jquery.MultiFile is as simple as adding class="multi" to your file input elements:

<input type="file" class="multi" name="files[]">

You can also specify additional configuration options:

<input type="file" class="multi" name="files[]" accept="jpg|jpeg|gif|png" maxfiles="5">

Advanced Usage

You can customize the appearance and behavior of the file input control by calling the MultiFile() method on the input element:

$(document).ready(function() {
  $('input[type=file].multi').MultiFile({
    accept: 'jpg|jpeg|gif|png',
    maxfiles: 5,
    maxfilesize: 1048576,
    dragDrop: true,
    onError: function(errorType) {
      alert('Error: ' + errorType);
    }
  });
});

This example sets various options like the accepted file types, maximum number of files, maximum file size, and drag-and-drop file selection. It also defines an error handler to display a message when an error occurs.

Conclusion

jquery.MultiFile is a great solution for adding multiple file selection capabilities to your web applications. It's flexible, easy to use, and highly customizable. Try it out today!