实时进度栏ASP.net

Question

I am uploading Large Video files on Amazon S3, I have to display progress bar while uploading. I am showing progress bar using javascript,but its not real time,for eg if I upload 3 MB video, it shows progress properly(ie 100%) then upload video(However in real,it uploads video while displaying the progress bar) This works fine for small videos,but when I upload videos more then 8MB, it show progress till 100% properly,while browser status(Left most Corner) shows 50% progress. This is how I am doing

 var size = 2;
  var id = 0;
            function ProgressBar() {
            if (document.getElementById('<%=FileVideoUpload.ClientID %>').value != "") {
                document.getElementById("divProgress").style.display = "block";
                document.getElementById("divUpload").style.display = "block";
                document.getElementById("fakebtn").style.display = "block";
                document.getElementById('<%=btnupload.ClientID %>').style.display = "none";
                id = setInterval("progress()", 250);
                return true;
            }
            else {
                alert("Select a file to upload");
                return false;
            }

        }

        function progress() {
            size = size + 1;
            if (size > 299) {
                clearTimeout(id);
            }
            document.getElementById("divProgress").style.width = size + "pt";
            document.getElementById("<%=lblPercentage.ClientID %>").firstChild.data = parseInt(size / 3) + "%";
            document.getElementById("<%=FileVideoUpload.ClientID %>").disabled = true;
            if (parseInt(size / 3) == 100) {
                document.getElementById("updstatus").innerHTML = "Please Wait..";
            }
        }


 <asp:FileUpload ID="FileVideoUpload" runat="server" />&nbsp;<br />
        <br />
        <asp:Button ID="btnupload" runat="server" Text="Upload" OnClientClick="return ProgressBar()"
            OnClick="btnupload_Click" />
        <input type="button" value="Upload" id="fakebtn" style="display: none" />
        <br />
        <br />
        <div id="divUpload" style="display: none">
            <div style="width: 300pt; text-align: center;" id="updstatus">
                Uploading...</div>
            <div style="width: 300pt; height: 20px; border: solid 1pt gray">
                <div id="divProgress" style="width: 1pt; height: 20px; background-color: Gray; display: none">
                </div>
            </div>
            <div style="width: 300pt; text-align: center;">
                <asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label></div>
        </div>

and on my btnupload_Click, I am doing this before uploading

System.Threading.Thread.Sleep(8000);

How can I display real progress of file upload?

Answer 1

As per the file upload concern, you cant really do ajax uploads. but there are few possiblities

1. Use HTML5 file api : File Api
2. Use third party library to monitor the progress bars. Jquery ajax file upload plugin

Hope this helps you to get started.

Answer 2

you might wanna take a look at File upload and Progress events with HTML5 XmlHttpRequest Level 2

Hope that can help you.