problem when changing the name of browse... of <input type="file" tag

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:

Expand|Select|Wrap|Line Numbers

   <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>