1

I have a webpage containing one ASP.NET file upload control and a button to upload the file to server. The existing code looks like below.

<div runat="server" style="width: 110%">
  <asp:FileUpload ID="fileUpload" runat="server" />
  <asp:Button ID="BtnFileUpload" runat="server"           OnClick="BtnFileUpload_Click" Text="Upload" />               
</div>

But our client don't want to see the default look and feel of a standard file upload control. He wants us to add another button and wrap the file upload control with the button, so that whenever user clicks on the button, file upload dialog window opens.

Thanks

Pranab Kumar De
  • 11
  • 3

2 Answers2

1

you cna do that using jquery you can set fileupload visiblity as none and can open fileuploader from button click like

<div runat="server" style="width: 110%">
    <asp:FileUpload style="display:none" ID="fileUpload" runat="server" />
    <asp:Button ID="BtnFileUpload" runat="server" onclick="$('#fileUpload').trigger('click'); return false;" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>

you need to reference of jquery for this.

Massimiliano Kraus
  • 3,638
  • 5
  • 27
  • 47
Kevin Shah
  • 1,589
  • 1
  • 13
  • 20
0

In addition to @Kevin Shah's solution, I got it working this way:

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClientClick="$('#ContentPlaceHolder1_FileUpload1').trigger('click'); return false;" Text="Upload" />

My Webform is inside a MasterPage, so I had to look at "View source" while debugging in Chrome to get the correct element ID ContentPlaceHolder1_FileUpload1 instead of just FileUpload1

Máster
  • 981
  • 11
  • 23