Hi,
We have used a file uploading HTML tag in an HTML page. We need to customize the text displayed on the Button (which is by default “Browse…” for internet explorer). Below is the code we have used:
CODE:
[HTML]<input type="file" style=" width:100%" id="importFile" name="importFile"/>
[/HTML]
As per our analysis we got two methods but none is satisfactory. Please let us know if there is any other way out
Method 1:
[HTML]<input type="file" onChange="chk.value=importFile.value;" style="display:none; width:100%" id="importFile" name="importFile"/>
<input name="chk" id="chk" type="text" value="" />
<input type="button" i18n="buttons.chooseFolder" onclick="importFile.click()"/>
[/HTML]
The i18n attribute in the button tag gets the corresponding locale specific value from the property file & displays it on the HTML page. We have tried this method but we got an error “access denied.” And the form is not submitted to the server.
Method 2:
- <style type="text/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;
-
}
-
-
</style>
-
<body>
-
<div class="fileinputs">
-
<input type="file" class="file" onChange="chk.value=importFile.value;" id="importFile" name="importFile"/>
-
<div class="fakefile">
-
<input name="chk" id="chk" type="text" />
-
<input type="button" i18n="dashboard.buttons.chooseFolder" style="width:75px"/>
-
</div>
-
</div>
-
</body>
-
It’s ok. But when we resize the window it gives problem.
Thanks & Regards:
Sandeep Kumar
