Forum Moderators: open
I use the <input type="file"...> tag in a html form but I would like to replace the button by a image.
Does anybody know how to do that?
Or do you know the rfc number?
hope for help,...
Stephan.
<input border="0" src="images/whatever.gif" . I think there are different ways to call the image though so someone might offer another way.
Brian
If I remember correctly, the consensus was that type="file" is a special case because it needs to interface with the user's OS to browse for the file. That's the reason that custom images don't work.
i read this on another forum
<div id="content1"
onmouseover="document.getElementById('fileName').value=
document.getElementById('buffer').value">
<h1 onclick="alert(document.getElementById('buffer').value)">Contact Page</h1>
<input id="buffer" style="display:none" type="file"
/>
<input type="text" size="30"
id="fileName" />
<input type="image" src="../img/warning.gif"
onclick="document.getElementById('buffer').click()" />
I've tried it, and variations of it... it does replace the "browse..." button with a custom button... and when you click on the button, it does open up the file selection menu... however, when i use this.. my upload code no longer works.. HELP!!!
<div id="content1"
onmouseover="document.getElementById('fileName').value= document.getElementById('buffer').value">,
the onmouseover wasn't working for me, so I got rid of this and put a onfocus event handler at the body level which is called on return from the choose file dialog box:
<BODY onfocus="document.getElementById('fileName').value= document.getElementById('buffer').value">
This worked for me, but remember that the event is called each and every time focus is returned to the page.
Welcome to WebmasterWorld. Thanks to both of you for the excellent contributions.
donny, you said:
"...remember that the event is called each and every time focus is returned to the page.
What practical challenges do you see here? Is there a strong likelihood of an incorrect or useless file name being uploaded? Or is it more that the same file would be sent numerous times?
Also, I'm wondering why onMouseover wouldn't work. It's a simple thing and you may have accommodated it, but as posted here, the script doesn't close the <div> tag.
the onmouseover does work, but only when you move the mouse over the DIV (obviously!).
This means that the text box update doesn't happen automatically on return from the Choose File dialog, so it doesn't appear to work immediately.
I don't see a practical problem with the event being called repeatedly; it's just not as neat & tidy as I would like.
Had a look at it and the use of a mouseover event a is highly unreliable way of updating the text input. What if somebody was using the keyboard tab to move around the page. Instead you can abandon the div and move its event to the onChange event of the file input:
<input id="buffer" style="display:none" type="file" onchange="document.getElementById('fileName').value=document.getElementById('buffer').value" />
<input type="text" size="30" id="fileName" />
<input type="image" src="3T/images/disk.gif" onclick="document.getElementById('buffer').click()" />
This should be far more reliable. Needless to say that this script was only ever going to work with IE.
