Nice jQuery Html File Input Field Plugin - Nice File Input

Nice File Input is a lightweight and clean jQuery plugin for styling the standard html file input filed with some useful options.

How to use it:

1. Include the latest jQuery library on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

2. Include jQuery Nice File Input plugin on the page

<link rel="stylesheet" href="css/jquery.nice-file-input.min.css" type="text/css" />
<script src="js/jquery.nice-file-input.min.js"></script> 

3. Create a standart html file input

<input type="file" class="nicefile" />

4. Call the plugin with options

<script type="text/javascript">
$('document').ready(function(){

$(".nicefile").niceFileInput({
  'width'         : '500', //width of button - minimum 150
  'height'  : '30',  //height of text
  'btnText'       : 'Browse', //text of the button     
  'btnWidth'  : '100' ,  // width of button
  'margin'        : '20',// gap between textbox and button - minimum 14   
});

});
</script>

---

This awesome jQuery plugin is developed by jaydevonline. For more Advanced Usages, please check the demo page or visit the official website.