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?
-
1possible duplicate of A file input button for all browsers, is this possible?mechanical_meat– mechanical_meat2012-04-04 18:12:20 +00:00Commented Apr 4, 2012 at 18:12
Add a comment
|
4 Answers
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.
Comments
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.
Comments
This link may be usefull : http://www.filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/
It explain how to :
- Add a "backaground layer" with you own design fir the field.
- 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 :
- http://uniformjs.com/ -> Uniform
Hope is what you want.
Aka.
Comments
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
answered Mar 30, 2012 at 15:44
xWAV92OdD445CbzcZAEyunk2M06fJi
3613 gold badges6 silver badges17 bronze badges
Comments
