What is the proper way to generate a progress bar when submission is with a form?

Question

I have a form which users can upload a media file(video/audio/image). User selects file then click submit and it gets uploaded to my server then it is uploaded to s3.

The form html:

<form id="mediaForm" method="POST" action="/member/uploadMedia" enctype="multipart/form-data" target="submitResult">
    <table cellpadding="5">
        <tbody>
            <tr>
                <td id="hiddenSymbol" style="display:none;"></td>
            </tr>
            <tr>
                <td id="hiddenUserName" style="display:none;"></td>
            </tr>
            <tr class="odd">
                <th scope="row">Material Type</th>
                <td class="materialTypes">
                    <input id="vidAudio" name="media" type="radio" value="video" tabindex="0" checked="checked">Video/Audio
                    <br>
                    <input id="image" name="media" type="radio" value="img" tabindex="1">Image</td>
            </tr>
            <tr>
                <th scope="row">Select the file to upload
                    <br><span id="mediaFootnote" class="footnote">(MOV, MP4, MP3 only; max file size 50 MB)</span>

                </th>
                <td class="detailValue">
                    <input id="mediaContents" name="contents" type="file" maxlength="128" size="50" tabindex="7">
                </td>
            </tr>
            <tr id="mediaOr">
                <td></td>
                <td>or</td>
            </tr>
            <tr id="youtubeLink">
                <th>Provide a Youtube link
                    <br/> <span class="footnote">
                                                Append the Youtube video id to input field.<br/>
                                                Click <a href="http://www.youtube.com/watch?v=EKyirtVHsK0" target="_blank">here</a> for how to find the video id.
                                            </span>

                </th>
                <td class="detailValue">
                    <input id="mediaLink" name="link" type="text" maxlength="255" size="60" tabindex="7" value="http://www.youtube.com/watch?v=">
                </td>
            </tr>
            <tr>
                <th>Title</th>
                <td class="detailValue">
                    <input id="mediaTitle" name="title" type="text" maxlength="100" size="60" tabindex="5">
                </td>
            </tr>
            <tr id="vidDescription">
                <th>Description</th>
                <td class="detailValue">
                    <input id="mediaDescription" name="description" type="text" maxlength="255" size="60" tabindex="5">
                </td>
            </tr>
            <tr>
                <th>Expiration Date
                    <br/><span class="footnote">Must be at least one day in the future.<br/>Default expiration is two years from published date.</span>
                </th>
                <td class="detailValue" id="expDate">
                    <input id="mediaExpiration" name="expiration" type="text" maxlength="10" size="20">
                </td>
            </tr>
            <tr>
                <td colspan="2" class="submitButton" style="padding-right:29px;">
                    <input id="mediaSubmit" name="Submit" type="button" value="" class="buttonSubmit" />
                    <div id="uploading-div" style="display:none; float:right; margin-top:4px; margin-left:-7px;">
                        <img src="/images/loading.gif">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <iframe id="submitResult" name="submitResult" style="display:none;" onload="checkSubmitResult()"></iframe>
</form>

On backend, I am using java; ServletFileUpload.