HTML and CSS Reference
In-Depth Information
});
$("#ImageButton1").click(function (evt) {
$("#FileUpload1").click();
evt.preventDefault();
});
});
This code essentially handles the client-side
click
event of the
ImageButton
control. Inside the
click
event handler, it triggers the
click
event of the
FileUpload
control (the file field). This way, an Open File
dialog is shown to the user. Because you don't have any server-side functionality for the
ImageButton
control, you call the
preventDefault()
method to cancel the default action. Upon selecting file(s), the
change
event of the file field is raised. Notice the use of the
files.
property that gives you access to all the
files selected using the Open File dialog. The
change
event handler displays the number of files selected
using the
length
property of the
files.
object.
Using Drag-and-Drop to Select Files
Selecting files from an Open File dialog isn't the only option for grabbing files to be read using the File API.
A more advanced option lets users drag files from Windows Explorer or the Desktop and drop them onto
some area of a web page. This drag-and-drop option requires more coding than the previous options
because you need to designate a certain area of a web page where files can be dropped; further, you must
handle certain events related to drag-and-drop. In the past, developers used third-party JavaScript
libraries or plug-ins to implement drag-and-drop. However, HTML5 provides native support for drag-and-
drop. Although implementing drag-and-drop-based file selection requires more code than the other
techniques, the overall process is straightforward and can be implemented easily as compared to
traditional HTML.
The native drag-and-drop support in HTML5 isn't limited to use with the File API. It's an independent
feature of its own and can be used in any situation where drag-and-drop is required. In the section that
follows, you learn how to implement drag-and-drop in a web page.
n
Note
Strictly speaking, selecting files using drag-and-drop requires only the drop operation to be captured.
However, the next section covers how to implement dragging as well as dropping operations for the sake of
completeness. You can use the native drag-and-drop support in many situations to provide a better user experience.
Working with Drag-and-Drop
Drag-and-drop operations are common in desktop applications. Modern web applications also try to
harness the ease and power of drag-and-drop operations to provide an enhanced user experience. Web
developers often resorted to third-party JavaScript-based libraries or custom techniques for enabling drag-
and-drop behavior in their web applications. Luckily, HTML5 comes with built-in support for drag-and-
drop.
Using drag-and-drop features, you can drag an HTML element and drop it onto another. You can also
drag files from Windows Explorer or the Desktop and drop them onto a web page for further processing.
During the drag-and-drop operation, you can pass data from the source element to the target element.
Implementing drag-and-drop essentially involves the following steps:
1.
Enable dragging for one or more HTML elements from a web page.
2.
Decide on a drop target, and handle the drop of draggable elements or files.
