ASP.net FileUploader Control - click using jQuery

问题:

I'm using a FileUpload control in ASP.net. Formatting input buttons is such a pain that I'm trying to work around by using a simple (formatted) button to activate a jQuery function that clicks the FileUpload control. Here is my formatted button, called btn_upload_FILE:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" />

Here's the FileUpload control:

<asp:FileUpload runat="server" ID="FILE_uploader"></asp:FileUpload> 

And here's the jQuery:

$('#<%= btn_upload_FILE.ClientID %>').click(function () {
     $('#<%= FILE_uploader.ClientID %>').click();
});

Super-simple, and it works great, it opens a file browser and lets me select a file.

The problem is that, even through the FileUpload control appears to be working, the file I select isn't actually loaded into the FileUpload control, so my code-behind can't see it. It looks like it's working, but the FileUpload ends up empty. The FileUpload's .change event is not fired, so I know nothing is happening. If I just press the FileUpload control's button, it works fine.

Can anyone tell me why the FileUpload isn't receiving a file, even though I can browse with it? Any help is, as always, appreciated.

回答1:

To upload file using FileUpload, you need to do a full postback, so you have to use a button with it:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" />
<asp:FileUpload runat="server" ID="FILE_uploader"></asp:FileUpload> 

And in the code behind, the button's Main method:

protected void Main(object sender, EventArgs e)
{
    // Specify the path on the server to
    // save the uploaded file to.
    String savePath = @"c:\temp\uploads\";

    // Before attempting to perform operations
    // on the file, verify that the FileUpload 
    // control contains a file.
    if (FILE_uploader.HasFile)
    {
        // Get the name of the file to upload.
        String fileName = FILE_uploader.FileName;

        // Append the name of the file to upload to the path.
        savePath += fileName;


        // Call the SaveAs method to save the 
        // uploaded file to the specified path.
        // This example does not perform all
        // the necessary error checking.               
        // If a file with the same name
        // already exists in the specified path,  
        // the uploaded file overwrites it.
        FileUpload1.SaveAs(savePath);

        // Notify the user of the name of the file
        // was saved under.
        UploadStatusLabel.Text = "Your file was saved as " + fileName;
    }
    else
    {
        // Notify the user that a file was not uploaded.
        UploadStatusLabel.Text = "You did not specify a file to upload.";
    }

}

You will find more here in MSDN.

Hope it helps!

EDIT:

You can also use jquery. First, hide the asp:button by setting it's display Property to none:

<asp:Button ID="btn_upload_FILE" runat="server" class="c_button" Text="Import an EDD" OnClick="Main" Style="display:none" />

Now add the jquery to trigger this button's click event when there is a file in FileUpload:

 <script type="text/javascript">
       $(document).ready(function () {
               $(document).on('change', '#<%= FILE_uploader.ClientID %>', function () {
               if (document.getElementById('<%= FILE_uploader.ClientID %>').files.length === 0) {
                   return;
               }
               $('#<%= btn_upload_FILE.ClientID %>').trigger('click');
           });
       });
   </script>

And don't forget to add a reference to jquery at the head of your page.

回答2:

Is your Form's Enctype set to "multipart/form-data"?

protected void Page_Load(object sender, EventArgs e)
{
    this.Page.Form.Enctype = "multipart/form-data";
}