Systemize your data with jQuery Nice File Input Plugin

By  |  2 Comments

HTML Elements Are Difficult To Style

As websites increase content sharing and collaboration features, nowadays users are choosing to upload more and more files such as photos, videos, documents and even personal data through different web application. They prefer to save these files on the cod based systems rather than locally on their computer desktop Web designers often try hard for a reliable look and feel of his art across various browsers, one of the essential parts of the website; the Html elements are very difficult to style. The Html input element with a type=file feature allows web developers a native control to handle file input functionality. The browsers give almost no control over how file inputs are displayed visually and making it hard to include them into a standardized interface design.

jQuery File Input Plugins

Users can use jquery file input plugins that is designed to convert a standard Html file input into a visually customizable control.  With the little help of CSS and JavaScript this plugin permits users to create a custom styled file input that powers all of the accessibility features the native input offers. The input element with a type feature whose value is file shows a list of file items that includes a file name, a file type and the content of the life that is called the file body.

Example #1 – File Input with default options

HTML

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

JavaScript

<br />$('document').ready(function(){<br />	$(".nicefile").niceFileInput();<br /> });<br /><br />

File Input with default options

File Inputs Include Limited Customization

Designers and developers know that input files include very limited customization and there are very complex plugins with many fallbacks that permits users to customize them. It’s still a challenge for users to get it working. The jquery plug-in helps to change the unattractive looking input with support for different files and a simple fall back for old browsers. Browsers do not allow user style file inputs where a file style plugin is intended for this situation. Using file input plugin users can use image as browse button, they can also style filename field as a normal text field using CSS. It is written using JavaScript and jquery.
Example #2 – File Input with bigger button

HTML

&lt;input type="file" class="nicefile-bigbtn"  /&gt;

JavaScript

<br />$(".nicefile-bigbtn").niceFileInput({<br />    'btnWidth' : '200'<br /> });<br /><br />

File Input with bigger button

Advertisements

Nice File Input jQuery Plugin

The Nice file input plugin is a light weight and clean jQuery plugin for styling standard Html file input field with some interesting and useful features. It is a simple jQuery plugin that is designed to give better looking files input HTML element.  With the help of this plugin users can do all kinds of customization to fit their applications quite easily. Normally users can’t use CSS to style Html files; this jquery plugin allows users to turn any element into a file input element. Customizing the Html file input element can be a difficult task for anyone and it is also time consuming as well. And it also does not result the same on different browsers. Nice file input plugin makes things easier and it has the ability to change the file inputs on 3 different Html elements such as a text input, a button and a div container which users can style with CSS the way they do it normally.

Features

  • The file input plugins make user’s file input nice and user friendly
  • Simple and easy to implement
  • Free plugin
  • Nice and intuitive user interface
  • Light weight only 0.9KB
  • It includes optional width for a file input element
  • The plugin provides optional width for browser button
  • It has the ability to automatically adjust the size attribute in Firefox

The Syntax

The jQuery nice file input plugin is very simple to use and the plugin syntax is pretty simple. Users just need to input their selector first followed by the nice file input and after as a parameters users have to put the width options and button text that they want the plugin to use in the file input. The jQuery file input can use 150 as minimum width in pixels for width option and for margin option it should be minimum 14.

Example

HTML

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

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
    });
});

Demo Link

Compatible with Different Bowser

The Nice file input plugin is tested on various browse and it can work amazingly with all modern browsers such as:

  • FIREFOX 3, FIREFOX 3.5, FIRE FOX3.6, FIREFOX 4, FIREFOX 5, FIREFOX 6
  • OPERA 10 AND OPERA 11
  • CHROME 12 AND CHROME 14
  • SAFARI 4, SAFARI5 ANS SAFARI 5.1
  • INTERNET EXPLORER6, 7, 8, 9

Requirements

This plug-in requires the jQuery library that is easily available at the Jquery website.

Download jQuery Nice file Input Plugin

2 Comments

  1. Vidiya

    August 8, 2013 at 11:44 am

    as developer always finding some resources for make better and advanced my output.

  2. Zen

    August 8, 2013 at 3:13 pm

    You ought to take part in a competition for one of the most useful blogs online. I will recommend this site!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>