Using and Image for Input type=file

jerelw
jerelw used Ask the Experts™
on
How can I use an image instead of the generic button on my input type="file"'s?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<html>
<head></head>
<body>

<form name="test_form" method="post" action="javascript:alert('submitted');">
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<input type="button"
      style="font-style:veranda; font-size:12px; font-weight:bold;text-transform:lowercase;color:white;background-color:#A2C382;height:22px;border-style:ridge;text-align:center;"
      onClick="this.form.browse.click();this.form.file.value=this.form.browse.value;this.form.browse.disabled=true;"
      value="Select a File...">        
<br><br>
<input type="image" name="submit" src="submit.gif">
</form>

</body>
</html>
duh!  wrong button!


<html>
<head></head>
<body>

<form name="test_form" method="post" action="javascript:alert('submitted');">
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">

<a href="#" onClick="document.forms[0].browse.click();document.forms[0].file.value=document.forms[0].browse.value;return false;">
<input type="image" name="submit" src="submit.gif" alt="submit"></a>

</form>

<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0].browse.disabled=true;document.forms[0].submit();'>
</form>

</body>
</html>
you should also include   border="0"   in your image tag.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

the previous code works, but this uses an IMG tag instead of an INPUT tag:


<html>
<head></head>
<body>

<form name="test_form" method="post" action="javascript:alert('submitted');">
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">

<a href="#" onClick="document.forms[0].browse.click();document.forms[0].file.value=document.forms[0].browse.value;return false;">
<img name="browse" src="calendar.gif" alt="browse" border="0"></a>

</form>

<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0].browse.disabled=true;document.forms[0].submit();'>
</form>

</body>
</html>
... but you should change "calendar.gif" to the correct image path/name.
thanks!

the source I provided was substantially authored by mbleser here:  http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_20396596.html
Has anyone gotten this code to actually work?  I have tried all code samples above, and they all do give the appearance of selecting the file within the browser window, but the file does not actually get sent to the server upon file submission.

thanks .
but.
with the above code we did not get  value for <input type="text" name="file">
field for first submission. after first submission <input type="text" name="file"> is taken previous value.
The accepted answer above is from November of 2002 - ten years ago.  HTML, javascript, and related technologies have changed considerably since then.  :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial