Click here to Skip to main content
15,666,947 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am trying to implement a video upload with a progress bar using an XMLhttprequest() and a html5 progress element like this:

<input type="file" name="fileUpload1" id="fu1" />
<button type="button" id="clicker" value="Upload" name="Upload" >Upload</button>
<progress id="prog1"></progress>

and the js:

$("#clicker").live('click', function (e) {
     UploadVideo("fu1", "");

 function UploadVideo(elm, url) {
      var xhr = new XMLHttpRequest();
      var fd = new FormData();
      fd.append("fu1", document.getElementById("fu1").files[0]);
      xhr.addEventListener("progress", ProcessVideo, false);"POST", "Handler.ashx");

 function ProcessVideo(evt) {
     if (evt.lengthComputable) {
         var prog = document.getElementById("prog1");
         prog.max =;
         prog.value = evt.loaded;

finally i am handling it using this generic ashx handler:

public void ProcessRequest (HttpContext context) {
     var file = context.Request.Files["fu1"];
     var savePath = HttpContext.Current.Server.MapPath("~/teees/" + file.FileName);
     context.Response.ContentType = "text/plain";
     context.Response.Write("Hello World");

this works fine but the progress bar doesn't move its stuck at zero then jumps to 100 when the upload is finished, what is the problem ?


1 solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900