Custom File Input with jQuery

Browsers offer almost no control over how file inputs are presented visually, making it difficult to incorporate them into a uniform interface design.

From the book Designing with Progressive Enhancement, the jQuery Custom File Upload Input plugin can be used to customize the file inputs very simple.

The demo can be viewed here and the sources can be downloaded from here. The plugin code is open source, so you can help improve the plugin.

How does it work

The widget creates a custom-styled file control using div and span elements, and then uses JavaScript to set the native input‘s opacity to zero and dynamically position it invisibly between the cursor and the custom control, so that the user interacts only with the input.How to use it

1. After you downloaded the source files from github,  include the scripts and the 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="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery.fileinput.js"></script>

2. The HTML markup

<label for="file">Choose photo</label>
<input type="file" name="file" id="file" />

3. Start the plugin

$(function(){
$('#file').customFileInput();
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s