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

If you're developing an ASP.NET Web Forms-based application, you can use the FileUpload server
control instead of using the raw markup shown in Listing 9-1. The markup in Listing 9-2 shows how you
can use FileUpload server controls.
Listing 9-2. Using FileUpload Server Controls
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:FileUpload ID="FileUpload2" runat="server" AllowMultiple="True" />
The first FileUpload server control shown here lets you select a single file. The second FileUpload
server control has its AllowMultiple property set to True and allows you to select multiple files.
If you're developing an ASP.NET MVC application, you can either use the plain HTML shown in Listing
9-1 or use an HTML TextBox helper to render a file field. Listing 9-3 shows how to use HTML TextBox
helpers to render file fields.
Listing 9-3. Using TextBox Helpers to Render File Fields
<% using (Html.BeginForm("Index","Home","POST")) { %>
<%= Html.TextBox("ile1", "",new {type="ile"})%>
<br />
<%= Html.TextBox("ile2", "",new {type="ile",multiple="multiple"})%>
<%}%>
As you can see, to render a file field you use TextBox helper and supply a type property value of ile .
The first call to the TextBox helper renders a file field that allows only one file to be selected, whereas the
second call sets the multiple property to allow multiple files to be selected.
Using a Custom Button to Select Files
Sometimes, using a file field to select files is undesirable for aesthetic reasons. Although you can use CSS to
change the look and feel of a file field, its appearance can't be altered drastically. For example, let's say you
wish to display an image on a web page, and when a user clicks the image you wish to prompt them to
select one or more files. Something like this is impossible using file field because even after applying CSS,
the field's basic appearance is governed by the browser.
If you wish to provide such a custom technique for selecting files in your application, you need to use a
programmatic trick. You essentially need to add a file field to the web page but keep it hidden from view.
When a user clicks a custom graphic or button intended for file selection, you trigger the click event on
the hidden file field through JavaScript. This way, the Open File dialog is displayed to the user. Once the
user selects one or more files, those files are assigned to the hidden file field. You can then access the files
for further processing.
Figure 9-4 shows a custom image for selecting files.