Custom BROWSE button caption in INPUT TYPE='FILE'

I am using the following HTML to upload a file

<form name="upload" action="catalogphoto.php" method="POST" enctype="multipart/form-data">
<tr><td><span>Select photo to upload:</span></td>
<td><input type="text" ID="imgfilename" readonly="1" value="">

<INPUT TYPE="file" ID="imgfile" NAME="imgfile" STYLE="display:none" onChange="imgfilename.value = this.value;">
<input type="button" onClick="imgfile.focus();;" value="Choose image file..."></td></tr>

<tr><td colspan="2" align="right"><input type="submit" value="UPLOAD"></td></tr>

However it does NOT work in IE 6.0.2800.1106 on Win98SE.

When I press the submit button the value of imgfile file-type input is cleared and form is not posted. On second click no file is posted to server.
Zlatin ZlatevTechnical ArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You CANNOT change the button for that. Nor can you script it. Browser security prevents it.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Zlatin ZlatevTechnical ArchitectAuthor Commented:
I was afraid of that... :(((
Zlatin ZlatevTechnical ArchitectAuthor Commented:
Anyway I will kepp this open for 7 days if there is expert with a workaround suggestion. (hope dies last < grim > )
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Just for effect, I will second webwoman's can't alter the "Browse..." button in any way.  You can't script it, you can't style it, etc.  It is impossible as of the current browsers go.  Maybe in future versions, they will at least give us an opportunity to style it, so that the file upload control can match overall styles schemes.

(chomp, chomp)
That code used to work because there was a security hole in IE (what else is new?) but it has been fixed and the behaviour of the browse button is back to what it is supposed to be.


Zlatin ZlatevTechnical ArchitectAuthor Commented:
Well I wanted to change the caption so that to have multiple languages of a page... And more descriptive caption. But I (and our customers) will live with "Browse" caption of the button.

It's shame that it cannot be styled and that there is no title, caption or whatever atribute for changing Browse button caption.

I am assigning the points to webwoman because she was first.

Kind Regards,
Zlatin Zlatev
Zlatin ZlatevTechnical ArchitectAuthor Commented:
However if someone has a solution for this (even if it requires additional component) drop me a line here and I'll repost the question.
Zlatin ZlatevTechnical ArchitectAuthor Commented:
pardon? what kind of "hack"? how do you determine what is "hack" and what is not?
Anything that tricks the user to get around browser security is a hack and a violation of the user rights; and THAT KIND OF CODE IS NOT GOING BE ALLOWED ON THIS SITE.

Page Editor, Javascript
Zlatin ZlatevTechnical ArchitectAuthor Commented:
OK I would like to know if there is a setting of browser security that will allow the user to use such a code. Suppose this code is used on a intranet...
If you are on an intranet.  You use IEAK to customize the security settings and you can do pretty much anything you want, or you build a custom activeX control.  

Darren KattanIT ConsultantCommented:
This is an outdated post, but styling an input=file is doable with some finesse. You wrap the <input type="file"> in another element, like a span, div, li, whatever. Set the container element to have an image background with the input file and browse button styled like you want it, then set the opacity of the <inpute type="file" /> to opacity=0; in your CSS. This makes the area look like your custom styling, but the user is actually clicking the transparent type=file input box.

This is a horrible explanation, but hopefully you get the idea.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.