HTML and CSS Reference
In-Depth Information
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!");