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
<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.
Search WWH ::

Custom Search