Uploadify: The jQuery Plugin for Customizing File Upload Fields | 3 | WebReference

Uploadify: The jQuery Plugin for Customizing File Upload Fields | 3

By Arpan Dhandhania


[next]

During the past few years, HTML and CSS have come a long way. CSS, for example, has made it extremely easy to implement rollovers. Prior to CSS2, implementing a rollover required you to create two images and use JavaScript to switch between the images when the mouse rolled over the button. Until a few years ago, form elements could not be styled. It took plenty of explaining for the developer to convince the designer that this shortcoming of the Web had no real workaround. But now those days are almost gone. I say almost because not all form elements can be styled with CSS. It can deal with text boxes and buttons, but not drop down menus, radio buttons, check boxes or file upload input fields.

The designer in me can accept the fact that I can't change the look of the drop down menus, radio buttons and check boxes. At least they look more or less the same across all browsers. But when it comes to the file upload field, I can't take it any longer. I can't control its dimensions, nor can I hide the filename. Some browsers have the button to the left of the filename and others have it on the right.

There are some nifty ways to hack the functionality and appearance of file upload fields using JavaScript and CSS, but it's not worth the trouble -- especially as there is an excellent Flash plugin for jQuery called Uploadify that allows you to customize file upload fields. In fact, this plugin allows several other much desired features like simultaneous multiple uploads.

About Uploadify

Uploadify is a jQuery plugin that integrates a fully customizable multiple-file upload utility on your website. It uses a mixture of JavaScript, ActionScript, and the server-side language of your choice to dynamically create an instance over any DOM element on a page.

Taking a quick glance at its features, we can:

  • Simultaneously upload multiple files
  • Gauge the upload speed with a progress bar
  • Upload large files more reliably
  • Style the upload button
  • Specify the file types that the user can upload

The Uploadify Code

The Uploadify code is quite simple to understand, especially if you have prior experience with jQuery. There are three aspects to the code:

  • A few includes
  • One JavaScript function
  • Some HTML markup

The Uploadify library contains the following seven files, which you can download the package here:

  • cancel.png
  • jquery.uploadify.v2.1.4.min.js
  • jquery-1.4.2.min.js
  • swfobject.js
  • uploadify.css
  • uploadify.php
  • uploadify.swf

Extract the content of the zipped file into the root folder and create a file with the following code to test out the uploader for yourself.

[next]