Very nifty how-to on lay-outing a file input element with CSS/DOM.
Came in handy when developing my RSS feed reader.
http://www.quirksmode.org/dom/inputfile.html
Extra: another approach
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.
<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);r eturn 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>
Recent Comments