CODEWITHSUNDEEP
javascripthtmlcssfile-upload
crazy sarah
crazy sarah

Reputation: 631

Styling a file input so it looks like an image

I have a form with a upload photo input on it. I wanted to have it so that people clicked an image and the browse folder dialog box would come up. So off I went this morning looking for how to do this.

So now I know that for security reasons this isn't as easy as I might have hoped. However, apparently you can make an image which is about the same size and the input field would be, set it at the same position as the input and set the inputs opacity to zero.

That's all very nice but there's an issue in IE7 where you can type directly into the text field of a file input. Also you're limited to having an image which is the same size as those inputs.

I was excited to find another solution which using the same idea you can have an image of any size and then with JavaScript make it so that the browse button appears (invisibly) behind the mouse pointer whenever the user mouses over the image.

However, I've just found out this solution doesn't work for Opera. And I've no idea why.

I've been at this all day and can't think of any other words to Google about this. Can anyone tell me how to fix this for opera or even if there's a similar solution (where you can have an image 95x95px) around?

Upvotes: 0

Views: 178

Answers (1)

Brad Christie
Brad Christie

Reputation: 101614

I would look in to uploadify. It's probably a little over-the-top for such a "simple" task, but it gives you all those freedoms and more (like multiple file upload ability if that matters).

The hard part is that the only real standard every browser agreed on, with regards to file uploads, is they need to click something, select a file, and have it upload on submit. Beyond that (size, color, method, etc.) is really on the browser developers.

The other thing you may be able to do is make the code browser-based. If it works (via the second method) on everything but opera, may want to stick with it then have JS intervene and default to the 0% opacity method when it is opera).

Unfortunately, I don't know what other options you have though.

Upvotes: 1

Related Questions