CODEWITHSUNDEEP
htmlcss
Brian
Brian

Reputation: 6071

File upload as image

I was wondering how I go about making an file upload input appear as an image.

For example, Facebook and Twitter have image icons for their image file uploads.

Thank you,

Brian

Upvotes: 5

Views: 715

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

EXAMPLE fiddle

The 'input' has a style: display:none;, than just do:

$('#upload_img').click(function(){
    $('#upload').click();
});

Upvotes: 6

MicronXD
MicronXD

Reputation: 2220

This is the standard goto HTML-only method of doing what I think you're asking:

http://www.quirksmode.org/dom/inputfile.html

basically, you place you browse image somewhere, and you overlay the <input type="file" /> with opacity set to 0.

It works in browsers as old as css opacity filters are. Alternatives include flash and calling .click() on the input element.

Upvotes: 0

Neil
Neil

Reputation: 55402

Sufficiently recent browsers allow you to call click() on the <input type="file"> element during the click event for another element, such as an image. (If you don't wait for a click event, you will probably get a blocked popup warning.)

Upvotes: 2

Related Questions