see demo click here

2008-01-08_011230.jpg

Most file upload forms suck. It?s not just the lack of design, but also the unintuitive and inflexible interface. There is usually a single file upload field, where you need to select and upload files one at a time. If your connection is slow and you have a bunch of files to upload, it will soon start to be irritating. Hotmail does it that way.

The slightly better approach is to have a list of file upload fields, so you can select the files at once, and be done with it. This method is sometimes assisted by a button to add more fields if you would need that.

But that is so far from what we are used to from the desktop applications. The text that can fit in the file upload field is not a very good representation of the actual file. (Normally something like ?C:\Documents and Setti??) And there?s just too many buttons.

http://www.topmost.se/personal/articles/file-upload-forms-that-don-t-suck.htm

how to use


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>wwIconified test page</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="wwiconified.js"></script>
    <link rel="stylesheet" href="wwiconified.css" media="screen" />
    <style type="text/css">
      img{
        float: none;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="Main">

      <form action="somefile.php" method="get" enctype="multipart/form-data">
        <h3>Files to upload</h3>
        <p>
          <input class="wwIconified" type="file" name="d[]" />
        </p>
      </form>

    </div>
  </body>
</html>