I’m working on a page that will allow a user to upload a photo with an HTML Input:
<input id="fileUpload" runat="server" type="file" style="visibility:hidden;" />
I’ve got it hidden because I want to style my own upload control by using an <img> for the Browse button and using Jquery to trigger the fileUpload control’s click event:
<img id="btnBrowse" alt="Choose an photo to upload..." src="images/browse.gif" />
JS:
$("#btnBrowse").click(function () {
$('input[type=file]').click();
});
I’m using an <ASP:ImageButton> for the Upload button and an <ASP:TextBox> to hold the text of the file chosen.
If I remove the style="visibility:hidden;", everything works fine. But with it, when I click Upload, the file upload control’s file is lost, and the page won’t post back until I click Upload a second time.
I know that this is kind of a “hack” but I don’t want to use an <ASP:FileUpload> control because it can’t be customized and I didn’t want to bother with a Jquery plugin if I can accomplish what I need without one.
Has anyone experienced this or have any idea how I could make this work while keeping style="visibility:hidden;" in place?
Many thanks in advance!
EDIT:
It actually appears to be more related to my custom “Browse” button. I was using an <img> as noted, and I’ve tried using an <ASP:ImageButton> but get the same results. Anytime I click my custom Browse button (which calls JS to click the input type=file), after a file is chosen, my Upload button will require two clicks (And the first click wipes out the filepath of the input (like it tries to post back)?
Any thoughts on this?
If I understand correctly, you can attach an event to the browse image in code behind. I’ve done the same when adding multiple attributes to buttons, ie. an onclick point to code behind and an onchange pointed to js.