ASP.NET - How to change "Browse" button's properties in FileUpload control

I tried realy very hard to find this but i am not able to find it out, how to change the properties of the "browse" button in the Fileupload, Color and text

The "Browse" button is inaccessible to CSS manipulation. This article has a workaround: Styling an input type="file" - http://www.quirksmode.org/dom/inputfile.html

Of all form fields, the file upload field is by far the worst when it comes to styling. There is no direct properties where we can apply styles to browse button of a upload control rather we can use some indirect mechanisms to obtain it.

A neat trick that allows us to (more or less) style file upload fields. The credits for the solution presented on this page are wholly his, I only added the position: relative, a few notes and tests, and ported it entirely to JavaScript.

Without the technique your browser reacts like this:

Using McGrady's technique, I was able to produce this file upload field:

 

Now that looks much better, doesn't it? (Provided your browser supports opacity)

1. Take a normal <input type="file"> and put it in an element with position: relative.
2. To this same parent element, add a normal <input> and an image, which have the correct styles. Position these elements absolutely, so that they occupy the same place as the <input type="file">.
3. Set the z-index of the <input type="file"> to 2 so that it lies on top of the styled input/image.
4. Finally, set the opacity of the <input type="file"> to 0. The <input type="file"> now becomes effectively invisible, and the styles input/image shines through, but you can still click on the "Browse" button. If the button is positioned on top of the image, the user appears to click on the image and gets the normal file selection window.
   (Note that you can't use visibility: hidden, because a truly invisible element is unclickable, too, and we need the <input type="file"> to remain clickable)

Until here the effect can be achieved through pure CSS. However, one feature is still lacking.

5. When the user has selected a file, the visible, fake input field should show the correct path to this file, as a normal <input type="file"> would. It's simply a matter of copying the new value of the <input type="file"> to the fake input field, but we need JavaScript to do this.

Therefore this technique will not wholly work without JavaScript. For reasons I'll explain later, I decided to port the entire idea to JavaScript. If you're willing to do without the visible file name you can use the pure CSS solution. I'm not sure if this would be a good idea, though.

The HTML/CSS structure

Follow the below HTML/CSS approach:

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;
}
<div class="fileinputs">
	<input type="file" class="file" />
	<div class="fakefile">
		<input />
		<img src="search.gif" />
	</div>
</div>

The surrounding <div class="fileinputs"> is positioned relatively so that we can create an absolutely positioned layer inside it: the fake file input.

The <div class="fakefile">, containing the fake input and the button, is positioned absolutely and has a z-index of 1, so that it appears underneath the real file input.

The real file input field also gets position: relative to be able to assign it a z-index. After all, the real field should be on top of the fake field. Then we set the opacity of the real file input field to 0, making it effectively invisible.

Also note the text-align: right: since Mozilla refuses a width declaration for the real file field, we should make sure that the "Browse" button is at the right edge of the <div>. The fake "Search" button is also positioned at the right edge, and it should be underneath the real button.

You'll need some subtle CSS to set all widths, heights, borders and so on, but I didn't include it in this code example. View the source of this page to study my approach in this particular case; your pages will be different, though, so you'll have to change these values.

Styling the button in file upload is not all that easy and can not be done directly...
You need to either place it in a DIV tag and style the div to have a selected styles for that...
Or else, you can directly place the file upload in TD of a table and style the td to reflect the changes to the browse button...

I'm not sure you can change it.

I did it this way:

1. make a button (for instance an input; it doesn't even have to run at server)
2. when the button is clicked, perform some javascript
3. the javascript will get the fileInput, and perform the click on it.
4. the 'Open File'-dialog is opened by pressing on a button you can modify any way you want.
5. Hide the fileInput control

Hope this helps!

Here is a complete example. Both buttons trigger the hidden input (type="file") element. One button is a html button (pure clientside), the other button is the asp:button.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
	  function triggerFileUpload()
	  {
		document.getElementById("File1").click();
	  }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
	  <input id="File1" type="file" style=" visibility:hidden;" />
	  <br />
	  <br />
	  <asp:Button ID="Button1" OnClientClick="triggerFileUpload()" runat="server" Text="ASPNET Button" />
	  <br />
	  <br />
	  <input id="Button2" type="button" onclick="triggerFileUpload()" value="HTML Button" />
	  <br />
	  <br />
    </div>
    </form>
</body>
</html>

<body onload="updateButtonWidth()" onresize="moveChooseFileButton(browseButtonWidth);">

  <form id="ABC">

    <iframe id="FileIframe" TabIndex=-1 frameBorder=0 width=100% height=22 src="FileChooserInnerHTML.aspx">

    </iframe>

    <INPUT type=button id="ChooseFileButton" value="参照 " onlick="chooseFile()" style="height:22;width:83;position:absolute;z-index:100"/>

    <P><INPUT onclick="uploadFile();return false;" type="submit" value="Submit"></P>

  </form>

</body>

<script>

  // Process when clicking 参照 button:

  function chooseFile()

  {

    // Get the iframe object:

    var iFrameObj = document.getElementById('FileIframe');

    // Get file chooser object (id = 'fileChooser') in the iframe

    var fileChooser = iFrameObj.contentWindow.document.getElementById('fileChooser');

    // Pop up file open dialog to choose a file:

    fileChooser.click();

  }

  function uploadFile()

  {

    // Get the iframe object:

    var iFrameObj = document.getElementById('FileIframe');

    // Get form that contains file input:

    var form = iFrameObj.contentWindow.document.getElementById('DEF');

    // Submit form to upload file:

    form.submit();

    return false; // Wait for file to finish upload

  }

</script>

source from :  http://blog.360.yahoo.com/blog-qCsFWG45eqF9lZ05AZldsUC.?p=58

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

 

Hi,

Im trying to change the browse button's default path to some specified path(Let's say C:\test).
I've tried with both the controls i.e <input type="file " /> and <asp:fileUpload />
Can u please help me out ...
Thanks in advance..

take a look..