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

<asp:Label ID="Label3" runat="server" Text="3. Drag & Drop"
CssClass="message">
</asp:Label>
</th>
</tr>
<tr>
<td>
<asp:FileUpload ID=”FileUpload1” runat=”server” AllowMultiple=”True” />
</td>
<td>
<asp:FileUpload ID=”FileUpload2” runat=”server” AllowMultiple=”true”
CssClass=”hidden” />
<asp:ImageButton ID=”ImageButton1” runat=”server”
ImageUrl=”~/Images/UploadFile.jpg”/>
</td>
<td>
<div id=”divBasket” class=”dropDiv”></div>
</td>
</tr>
</table>
</div>
<div class="divBlock">
<table id=”Table1” border=”1” cellPadding=”3”></table>
</div>
<div class="divBlock">
<img id=”filePreview” />
</div>
</form>
The bold elements in the listing are important to the functioning of the web form. The file field
FileUpload1 is used to select files directly, whereas FileUpload2 is kept hidden and shows the Open File
dialog when the ImageButton is clicked. The <div> element divBasket is the drop target where files dragged
from Windows Explorer can be dropped. The HTML table Table1 is filled dynamically using jQuery
depending on the files selected. A preview of the images is shown in filePreview image element.
Various events of the elements are wired in the jQuery ready() function, shown in Listing 9-18.
Listing 9-18. Wiring the Event Handlers of the HTML Elements
var files;
$(document).ready(function () {
$("#FileUpload1").change(OnChange);
$("#FileUpload2").change(OnChange);
$("#ImageButton1").click(function (evt) {
$("#FileUpload2").click();
evt.preventDefault();
});
var basket;
basket = document.getElementById("divBasket");