Learning jQuery

File upload control is a very common control, but the look and feel of file upload control is eye catching. Also there is no control how browser renders it. Different browsers renders in different style, which is not what you want. So in this post, I will demonstrate a jQuery plugin called "jQuery Custom File Input" which allows to make file upload control look stylish and eye catching.

How to use it?

First download the plugin and add references of required js and css files.

<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/enhanced.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>

Declare a file upload control.

<label for="file">Select File</label>
<input type="file" name="file" id="flUpload" />

And use below jQuery code.

//Code Starts
$(document).ready(function(){
  $('#flUpload').customFileInput();
});
//Code Ends

See result below.

How does it work?

The plugin creates a custom-styled file control using div and span elements, and then it uses JavaScript to set the default input file upload opacity to zero and dynamically position it invisibly between the cursor and the custom control. So that the user interacts only with the input.

Feel free to contact me for any help related to jQuery, I will gladly help you.