469,645 Members | 1,360 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

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


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:

[HTML]<input type="file" style=" width:100%" id="importFile" name="importFile"/>

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()"/>

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
  1.   <style type="text/css">
  2. div.fileinputs 
  3. {
  4.    position: relative;
  5. }
  7. div.fakefile 
  8. {
  9.    position: absolute;
  10.    top: 0px;
  11.    left: 0px;
  12.    z-index: 1;
  13. }
  15. input.file
  16.  {
  17.    position: relative;
  18.    text-align: right;
  19.    -moz-opacity:0 ;
  20.    filter:alpha(opacity: 0);
  21.    opacity: 0;
  22.    z-index: 2;
  23. }
  25. </style>
  26. <body>
  27. <div class="fileinputs">
  28.    <input type="file" class="file"  onChange="chk.value=importFile.value;" id="importFile" name="importFile"/>
  29.    <div class="fakefile">
  30.                                     <input  name="chk"  id="chk" type="text" />
  31.               <input type="button" i18n="dashboard.buttons.chooseFolder"  style="width:75px"/>
  32.    </div>
  33. </div>
  34. </body>
It’s ok. But when we resize the window it gives problem.

Thanks & Regards:

Sandeep Kumar
Oct 30 '08 #1
1 3071
16,027 Expert Mod 8TB
It seems as if you're using the CSS from this article. Have you tried the JavaScript version?
Oct 30 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Jesper Hermansen | last post: by
2 posts views Thread by IkBenHet | last post: by
7 posts views Thread by Tim Slattery | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.