By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,693 Members | 1,108 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,693 IT Pros & Developers. It's quick & easy.

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

P: 4

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=""/>

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
Share this Question
Share on Google+
1 Reply

Expert Mod 15k+
P: 16,027
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.