472,115 Members | 1,462 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,115 software developers and data experts.

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 3166
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 leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.