jerelw
asked on
Using and Image for Input type=file
How can I use an image instead of the generic button on my input type="file"'s?
duh! wrong button!
<html>
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<a href="#" onClick="document.forms[0]
<input type="image" name="submit" src="submit.gif" alt="submit"></a>
</form>
<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0]
</form>
</body>
</html>
<html>
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<a href="#" onClick="document.forms[0]
<input type="image" name="submit" src="submit.gif" alt="submit"></a>
</form>
<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0]
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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('
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<a href="#" onClick="document.forms[0]
<img name="browse" src="calendar.gif" alt="browse" border="0"></a>
</form>
<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0]
</form>
</body>
</html>
<html>
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<a href="#" onClick="document.forms[0]
<img name="browse" src="calendar.gif" alt="browse" border="0"></a>
</form>
<form name='dummy'>
<input type='button' value='Submit' onclick='document.forms[0]
</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: https://www.experts-exchange.com/questions/20396596/When-replacing-input-type-file-Browse-button-must-click-SUBMIT-twice-for-form-to-submit.html
the source I provided was substantially authored by mbleser here: https://www.experts-exchange.com/questions/20396596/When-replacing-input-type-file-Browse-button-must-click-SUBMIT-twice-for-form-to-submit.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.
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. :)
<head></head>
<body>
<form name="test_form" method="post" action="javascript:alert('
<input type="file" name="browse" style="display:none;">
<input type="text" name="file">
<input type="button"
style="font-style:veranda;
onClick="this.form.browse.
value="Select a File...">
<br><br>
<input type="image" name="submit" src="submit.gif">
</form>
</body>
</html>