Use image input type file? 2

shu745 · Jan 6, 2005

Hey all, I was hoping there was a way to use an image to essecially do the same thing as <input type="file">. I haven't seen it done before so I'm not sure if it's possible.
I was hoping thru javascript we could do sumething like:

function browseFile() {
whatever code needed to do the file upload stuff
}
....
<img onClick="browseFile()" />

I just want the button to look pretty. Any help is appreciated.

-Shu

RISTMO · Jan 6, 2005

Code:

<form name="fn">
<input type="file" name="f_input">
<input type="image" src="Band Picture.JPG" name="i_input" onclick="document.fn.f_input.click();return false;">
</form>

However, it's IE only (and maybe also Opera). Not just that, but IE pops up a security warning about ActiveX controls the first time you click the link. Not really worth the trouble, in my opinion. And setting the background-image for a file input doesn't work, either. I don't think it's doable.

Rick

http://www.ristmo.com/

glenmac · Jan 7, 2005

I just want the button to look pretty.

I believe you could use css to set the background image of the button.

Glen

http://lantzvillecomputers.ca

shu745 · Jan 7, 2005

The background image doesn't work nor does css on the input type file. RISTMO, thanks for the code, but i guess i'll just have to settle.

Thanks for the input.
- Shu

CliveC · Jan 7, 2005

Would this help:

Code:

TEST.HTM
<html>
<script>

</script>
<body>
<form name="mail" method="get"
 action="test.htm">
<input type="image" src="mypic.jpg" />
</body></html>

It returns the x & y coordinates in the querystring.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

CliveC · Jan 7, 2005

By way of clarification: you would only execute your function if the querystring was populated, as it would be on the second visit.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

wing2x · Jan 8, 2005

PPK has an in-depth discussion of a technique to do that here (www.quirksmode.org)

shu745 · Jan 10, 2005

CliveC: Thank you for your reply but I just wanted to style my input type file button using css styles or an image, not submit the form using an image.

wing2x: THANK YOU for your reply. This info seems very helpful! You get a star. =)

- Shu

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Use image input type file? 2

shu745

Programmer

RISTMO

Programmer

glenmac

Technical User

shu745

Programmer

CliveC

Programmer

CliveC

Programmer

wing2x

Programmer

shu745

Programmer

Similar threads

Part and Inventory Search

Sponsor