HTML and CSS Reference
In-Depth Information
Figure 11-5.
The progress of a file upload is shown using a progress bar.
This web form should look familiar: you developed something similar in Chapter 9. The web form
allows you to drag and drop files from Windows Explorer or the Desktop onto the basket image. You can
then upload the files to the server using the Upload button. An upload operation can be cancelled with the
Cancel button. The progress of the file-upload operation is shown in a progress bar.
The web form's markup is straightforward. The only unfamiliar element is the HTML5
<progress>
element, which render a progress bar at the bottom of the web form. The
<progress>
element looks like
this:
<progress id=”uploadProgress” value=”1” max=”100”></progress>
This
<progress>
element uses two attributes:
value
and
max
. The
value
attribute indicates progress
made by an operation. The
max
attribute controls the scale of the
value
attribute. For example, if you wish
to display upload progress as a percentage (%), you need to set the
max
attribute to
100
so the
value
attribute can take a maximum value of
100
. Note that the
<progress>
element by itself doesn't
automatically increment. You need to set the
value
attribute programmatically in order for the progress
bar to show the correct progress.
When you click the Upload button, a JavaScript function—
UploadFiles()
—is called that initiates the
upload operation.
UploadFiles()
is shown in Listing 11-11.
