Custom HTML5 File Input Plugin With jQuery - mn-file-upload
File Size: | 12.2 KB |
---|---|
Views Total: | 2530 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

mn-file-upload is a lightweight, easy-to-use jQuery plugin which transforms the normal HTML5 file input into a highly customizable file uploader with image preview.
How to use it:
1. Include the stylesheet jquery.mn-file.css
in the head
, and the JavaScript file jquery.mn-file.js
at the bottom of the html page.
<link href="jquery.mn-file.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.mn-file.js"></script>
2. Create the file input following the html structure as this:
<div class="customFile"> <span class="selectedFile">No file selected</span> <input type="file" name="inputName"> </div>
3. Call the function on the input field and done.
$("[type=file]").mnFileInput();
4. Config the file input with the following settings.
$("[type=file]").mnFileInput({ // left, right or button display: 'left', // button text controlMsg : 'Choose a file', // message to show when no file selected noFileSelectedMsg : 'No file selected', // image preview element preview : '', // supported extensions previewSupportedExt : ['png', 'jpeg', 'jpg', 'gif'] });
5. You can also pass the options via data-OPTION
attribute as this:
<div class="customFile" data-display="button" data-controlMsg="Choose a file"> <span class="selectedFile">No file selected</span> <input type="file" name="inputName" /> </div>
6. Callback functions available.
$("[type=file]").mnFileInput({ beforeChange : function(){}, afterChange : function(){}, afterPreview : function(){} });
This awesome jQuery plugin is developed by mahmoud-nb. For more Advanced Usages, please check the demo page or visit the official website.