Dealing with Local Files Using the File API - HTML5 Programming for ASP.NET Developers - page 228

Figure 9-4. Selecting files using a custom image button
The web form consists of a Label control, a FileUpload control, and an ImageButton control. Listing
9-4 shows the web form's markup.
Listing 9-4. Prompting for File Selection Using a Custom Image
<form id="form1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" AllowMultiple="true"
CssClass="hidden" />
<asp:Label ID="Label1" runat="server" CssClass="message"
Text="Click on the image below to select iles" >
</asp:Label>
<br />
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/Images/UploadFile.jpg" />
</form>
Notice a couple of things in the markup. First, the AllowMultiple property of the FileUpload control is
set to True so as to allow multiple-file selection. Second, its CssClass property is set to a CSS class named
hidden . The hidden CSS class looks like this:
.hidden {
display:none;
}
The hidden CSS class simply sets the display CSS property to none so that at runtime, the FileUpload
control isn't visible. An ImageButton control is used to display a clickable image to the user. In order to trap
the client-side click event of the ImageButton and programmatically trigger the click event of the
FileUpload control, you need to write some jQuery code. Listing 9-5 shows the jQuery code to add to the
web form.
Listing 9-5. Programmatically Triggering the click Event of the File Field
$(document).ready(function () {
$("#FileUpload1").change(function (evt) {
alert(evt.target.files.length + " file(s) were selected!");