按钮的click事件触发asp.net中的fileupload控件

Question

I have a file upload Control and I have made this invisible.

I want to enable a browse Button for that file upload control when I click another Button .

How can I do it?

Answer 1

First make a file up loader like this one

To upload a file you need to do 2 things

1) Select the file. (click browse button)

2) Send it to server. (click the upload button)

So first lets write a java-script to do these.`

<script type="text/javascript" > 
function uploadImage() {
    $('#MainContent_UploadButton').click()
}
function selectFile() {
    $('#MainContent_FileUploadControl').click();
}
</script>

Now make the file upload controller upload itself as soon as a file is selected

 <asp:FileUpload id="MainContent_FileUploadControl" runat="server" 
            onChange="uploadImage()" class="hidden"/>

Then make a new button and let it select the file as soon as it is clicked.

    <asp:Button ID="MainContent_UploadButton" runat="server" Text="Upload File" 
            OnClientClick="selectFile(); return false;" />

The most important point is put "return false" in the onClientClick field. It will block the buttons post back and let you choose a file without refreshing the page.

Now hide the unwanted components using css and you are done !!

Answer 2

<asp:FileUpload ID="FileUpload1" runat="server" style="display:none;"/>
<input id="btnFileUpload" type="button" value="Add" runat="server" />

btnFileUpload.Attributes.Add("onclick", "document.getElementById('" + FileUpload1.ClientID + "').click();");

Answer 3

I think this is not possible. This would likely be a security issue if a script could upload (or at least trigger the upload process) invisible from any user interaction.

---

Update:

Seems that someone actually developed a solution to hide the upload control . From what I read it seems to take some effort to develop and uses JavaScript.

Personally, I wouldn't dare to guarantee that this works on all platforms (just imagine someone with a BlackBerry or Windows Phone visits your website...) and thus avoid it.