This script will let you use an image for the 'Browse...' button and style the textbox. It also clears the path name from both the file and text tags so they stay in synch. I also have it so the image path is displayed on submit so you can see it is working... take that out when you use it.
<html>
<head>
<script type="text/javascript">
function setPath(f) {
document.getElementById('mypath').value = f;
}
function browse() {
document.getElementById('realFile').click()
}
function clearIt(f) {
f.value='';
var d = document.getElementById('browser');
var olddiv = document.getElementById('realFile');
var new_element = document.createElement( 'input' );
new_element.type = 'file';
new_element.id='RealFile';
new_element.onchange = function() {document.getElementById('mypath').value = document.getElementById('realFile').value;};
d.replaceChild( new_element,olddiv );
}
</script>
</head>
<body>
<form onsubmit="alert(document.getElementById('realFile' ).value);return false;">
<input type="text" style="width=300px;border:solid 1px #0000FF" id="mypath" onfocus="clearIt(this)">
<a href=#" onclick="browse()"><img src="d.gif" border=0></a>
<div id="browser" style="display: none">
<input type="file" id="realFile" onchange="setPath(this.value)"><p>
</div>
<input type="submit" >
</form>
</body>
</html>
2,476
