Simple jQuery Plugin For Custom File Upload Input
File Size: | 11.4 KB |
---|---|
Views Total: | 6194 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple jQuery plugin used to customize & enhance the native file input using CSS and allowedExts
JS array which restricts the file extensions allowed to upload.
How to use it:
1. Include the jquery.simplefileinput.css
for the preset file input styles.
<link rel="stylesheet" href="src/css/jquery.simplefileinput.css">
2. Insert a regular file input in your document body.
<input type="file" id="demo">
3. Include the jQuery library and the jQuery Simple File Input plugin at the bottom of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="src/js/jquery.simplefileinput.min.js"></script>
4. Initialize the plugin and setup the options for the file input.
$('#demo').simpleFileInput({ placeholder : 'Select an image', buttonText : 'Select', allowedExts : ['png', 'gif', 'jpg', 'jpeg'] });
5. Options and defaults.
placeholder: 'Pick your file'
: A text that shows up when there is no selected file yetwrapperClass : 'sfi-container'
: This is the class used for the wrapper that wraps the customised file input.validClass : 'sfi-valid'
: If everything goas right, this class gets added to the wrapper and you can use it for CSS'ying.errorClass : 'sfi-error'
: If a file with a wrong extension has been picked, this class gonna be added to the wrapper, so you can use it for CSS'ying.disabledClass : 'sfi-disabled'
: If the input file is disabled on the html, you may need to give it a different style, that's why .sfi-disabled is there.buttonText : 'Pick your file'
: Used for the button as a visual texallowedExts : false
: This has to be an arraywidth : 300
: This parameter can be false, this way the plugin would not set a width for the element, but if you do need a specific dimension you can use it.onInit : function(){}
: Gets called during the initialisation of the plugin ( on each input );onFileSelect : function(){}
: Gets called when a file gets selectedonError : function(){}
: Gets called if the choosen file has a non-accepted extention / file type.
This awesome jQuery plugin is developed by s43. For more Advanced Usages, please check the demo page or visit the official website.