I didn't look over the full details of this thread, but I recently ran across this link which describes a cross-browser method of styling the "Browse" button. It's an awesome effect that relies on the use of opacity as described in the last post here, but takes it a step further by adding a little javascript. There are a few caveats but overall it looks like a very good hack for the problem.

http://www.quirksmode.org/dom/inputfile.html

All of the major browsers support opacity in some form via CSS. Here is a page that describes the different CSS properties that different browsers use for opacity.
http://www.quirksmode.org/css/opacity.html

He's a little outdated though, Mozilla 1.7 supports the CSS 3 opacity property, whereas previous to that version the proprietary -moz-opacity property is used.

So it can be done in Mozilla, Netscape, Firefox, Safari and IE, users of browsers with no opacity support will see the file input field positioned on top of the customized input field + image.

There are some security ramifications as to why browsers don't allow styling of the file input field. This bug in Mozilla describes some of the security concerns with that:
http://bugzilla.mozilla.org/show_bug.cgi?id=57770

Regards,
Rich

--
[http://www.smilingsouls.net]
[http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail

Interesting solution. I'll try this out someday, and see if it has the sam problems as the hidden controls solution (with that solution, no file was actually uploaded).

However, it looks to me this is better, as you still really click the original Browse button, and not a replacement button.

Will check it out...

Thanks,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Endlessly by Muse (Track 12 from the album: Absolution) What's This?

I redefined the sample of Imar in a new webControl, but Im having a trouble with the HtmlInputFile.PostedFile.SaveAs().. 'cause when I fired this event the posted file dissappears, any ideas????

Did you use my first example from the start of the thread? If so, you need to read the entire thread, because the issue you're experiencing is discussed. It seems to be a problem with later (service packs) versions of IE.

Later in the thread a CSS solution is proposed that seems to work....

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Hey, I've read almost the whole thread. But I was wondering.
I only need to adjust the language of the button... Is this possible without using a whole lot of javascript or special css files?

I have to make a web page that is dutch/french. I've noticed that the language of the button depends on the language of the OS you're running.

There is an attribute lang for the <input>-tag, but setting this does not work.

So, is there a way to do this? Or do I really have to make this work with javascript and css styles?

Greetz

Hi DeBiese,

Yeah, I am afraid so. AFAIK, there is no way to set the text for the button to something like Bladeren, so the only way to do is to completely replace the control itself with the CSS solution from this thread.

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

Here is my solution to the problem:

NOTE: filebutton2.gif dimensions are 88W X 25H.

<style>
.FileButton2
{
    filter: alpha(opacity=0);
}

.FileButton
{
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    background: url(Images/filebutton2.gif) fixed no-repeat right center;
}
</style>
<script id="clientEventHandlersJS" language="javascript">
    <!--
    function SetTextBox()
    {
        var tFile = document.getElementById('txtFile');
        var file = document.getElementById('fileUpload');
        tFile.value = file.value;
    }
    function ClearFileName()
    {
        var tFile = document.getElementById('txtFile');
        if (tFile.value == '')
        {
            var file = document.getElementById('fileUpload');
            file.outerHTML = '<input type="file" name="fileUpload" id="fileUpload" class="FileButton2" onchange="return SetTextBox();" style="height:25px;width:66px;" />';
        }
    }
</script>

<table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 242px">
  <tr>
    <td nowrap="nowrap" class="FileButton">
      <input name="txtFile" type="text" id="txtFile" onchange="return ClearFileName();" style="height:25px;width:408px;" />
      <input type="file" name="fileUpload" id="fileUpload" class="FileButton2" onchange="return SetTextBox();" style="height:25px;width:66px;" />
    </td>
  </tr>
</table>

Hope this helps.

Alex

When i tried the same code it works fine but on server side we have not any file streamed there is null value

Please help me


With regards
Shafi

Hi

i have tried this code but the file does not uploads i.e

txtFile.PostedFile in null

with regards

Really it was good but it does not upload the file on server side there is not any file posted

with Cheers