<html>
<head></head>
<body>
<form name="test_form" method="post" action="test.jsp">
<input type=file name=browse style="display: none;">
<input type=text name=file>
<input type=button value="Select a File..." onClick="browse.click();file.value=browse.value;">
<!-- must be clicked twice for the form to submit! -->
<input type=submit value="Submit The Form Now!">
</form>
</body>
</html>
the above method only works in IE.
Javascript method to rename the Browse button of the filebrowse control.
To work with other browsers try the below one.
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("browse");
fileinput.click();
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>
<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>
CSS method to rename the Browse button of the filebrowse control.
You can try the below method based on pure CSS
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.gif" />
</div>
</div>
