Pretty Input Type=File Replacement with jQuery - FileInput

FileInput is a jQuery input replacement intended to style and customize the button and input filed of the standard input type="file" elements.

You might also like:

• jQuery Plugin For Drag and Drop File Input Field - ezdz
• Styling Your File Input with jQuery Inputfile Plugin and Bootstrap
• Nice jQuery Html File Input Field Plugin - Nice File Input
• Simple HTML File Input Enhancement Plugin - enhancedfileinput

How to use it:

1. Include the latest version of jQuery library and jQuery fileinput plugin in the page.

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

2. Create a standard file type input field.

<input type="file" name="file1" >

3. Style the file type input via CSS.

.fileUpload {
background: #fff;
border: 0;
display: block;
margin: 2% 0 5% 0;
width: 100%;
/* border radius */
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* The button */
.fileUpload .fileBtn {
background: #2C88D6;
cursor: pointer;
float: left;
font-size: 1em;
font-weight: bold;
padding: 3% 0;
text-align: center;
width: 33%;
/* border radius */
-o-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.fileUpload .fileBtn:hover {
background: #2C4356;
}
/* Where the input-name will be filled in */
.fileUpload .fileName {
float: right;
overflow: hidden;
white-space: nowrap;
width: 67%;
text-align: center;
color: #000;
padding: 3% 0;
}
/* Animation (hover) */
.fileUpload .fileBtn:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: background;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-in;
-o-transition-property: background;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-in;
-ms-transition-property: background;
-ms-transition-duration: 0.4s;
-ms-transition-timing-function: ease-in;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
/* Clear input-parent, due to child-floats */
.fileUpload:after {
clear: both;
content: " ";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
/* Make padding go inside the boxes */
div, input, textarea, select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Blurry text fix with Webkit browsers */
* {	-webkit-font-smoothing: antialiased; }
/* Removes the default, orange outline with Chrome. */
*:focus { outline: none; }

4. Call the plugin.

<script>
$(document).ready(function() {
fileInput();
});
</script>

5. Arguments

fi_container_class	=	fi_container_class	||	'fileUpload'; // Classname of the wrapper that contains the button & filename.
fi_button_class		=	fi_button_class		||	'fileBtn'; // Classname for the button
fi_filename_class	=	fi_filename_class	||	'fileName'; // Name of the text element's class
fi_button_text		=	fi_button_text		||	'Choose fil...'; // Text inside the button

---

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