jfancyfile – take control of your file input fields & customize ’em with this jQuery plugin ![](https://camo.githubusercontent.com/9fe8bea0fa3a8ddf5788bcfedf810871dc1bf9577069844127a6a34602254641/687474703a2f2f7374696c6c6d61696e7461696e65642e636f6d2f61726e6175642f6a66616e637966696c652e706e67)
jfancyfile is a jQuery plugin that enables taking control of your file input fields & customizing ’em.
Check demo.html
Add the following lines just before your </head>
tag:
<link href="jfancyfile.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jfancyfile.js" type="text/javascript"></script>
Then create your customized menu:
<form>
<input type="file" id="upload-file" name="file" />
</form>
Finally, you may want to customize its style, by adding some custom CSS. Here is an example:
<style type="text/css">
.fancy-upload {
background: #f7f7f7;
border-radius: 9px;
border: 1px solid #eee;
}
.fancy-upload:hover {
background: #ddd;
border-color: #888;
}
</style>
The basic usage is this one-liner:
$('#file').jfancyfile();
But options can be passed as arguments:
The dimensions can be defined in the options.
$('#file').jfancyfile({
width: 300,
height: 200
});
jfancyfile is open source and is licensed under the MIT license.