How to customize the text of an HTML File control's browse button
HTML file element is used to upload files to the server. Usually the File element have a button having texts like "Browse", "Choose" or "Choose file" depending on the browser you use. If you want to customise the Browse button text, there is a sample hack code on net, which uses some CSS work arounds to display an image over a browse button, which on clicked will popup the file selector window.
[Courtesy : quirksmode.org ]
Here is the code for that.
The full expanation to the above given code is given in quirksmode.org, to read more please visit:
http://www.quirksmode.org/dom/inputfile.html
HTML file element is used to upload files to the server. Usually the File element have a button having texts like "Browse", "Choose" or "Choose file" depending on the browser you use. If you want to customise the Browse button text, there is a sample hack code on net, which uses some CSS work arounds to display an image over a browse button, which on clicked will popup the file selector window.
[Courtesy : quirksmode.org ]
Here is the code for that.
<html>
<head>
<script>
var W3CDOM = (document.createElement && document.getElementsByTagName);
// call this function on body onload
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
// replace the image file with yours
image.src='images/button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
</script>
<style>
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;
}
</style>
</head>
<body onload="initFileUploads()">
<div class="fileinputs">
<input type="file" class="file">
</div>
</body>
</html>
<head>
<script>
var W3CDOM = (document.createElement && document.getElementsByTagName);
// call this function on body onload
function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var image = document.createElement('img');
// replace the image file with yours
image.src='images/button_select.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}
</script>
<style>
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;
}
</style>
</head>
<body onload="initFileUploads()">
<div class="fileinputs">
<input type="file" class="file">
</div>
</body>
</html>
The full expanation to the above given code is given in quirksmode.org, to read more please visit:
http://www.quirksmode.org/dom/inputfile.html
Comments
Post a Comment