Image Button To Upload Files CSS

I want to upload files using an image as a button. The image is a square 150x150开发者_运维知识库. When I click the square, the file dialog should open up. How do I do this?

File type inputs cannot be styled, but there is a workaround, see Quirks Mode documentation on this.

Basically you make the input completely transparent and position the image beneath.

Have a look at A file input button for all browsers, is this possible? - this was using another button element but it could use an image instead.

This link may be usefull : http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

It explain how to :

1. Add a "backaground layer" with you own design fir the field.
2. Change the style of "Basic File Button" to transparent et put it over the layer.

You can also find some "jQuery Plugin" to transforme all you form field :

1. http://uniformjs.com/ -> Uniform

Hope is what you want.

Aka.

You can declare the input file and the image then , hide the "choose file" button BY PUTTING A DIV ON IT. The div should be the same as the background.

Then link the image to the button using jquery and use trigger