ASP.NET视频上传及进度条

Question

我正在尝试使用XMLhttprequest()和HTML5进度元素实现带有进度条的视频上传，如下所示：

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

和js：

   $("#clicker").live('click', function (e) {
        e.preventDefault();
        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);
         xhr.open("POST", "Handler.ashx");
         xhr.send(fd);
    }

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

最终，我使用这个通用的ashx处理程序来处理它：

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

这个功能可以正常使用，但进度条不会移动，当上传完成时，它会一直停留在零，然后跳到100。这是什么问题呢？

谢谢。

- Wahtever

Answer 1

也许是这些行吗？

  this.xhr = new XMLHttpRequest();
  if ( this.xhr ){
    this.xhr.upload.addEventListener("progress", function(e){ updateProgress(e) }, false);

  function updateProgress(){
     if (e.lengthComputable) {
       var currentState = (e.loaded / e.total) * 100;
       //...
     }
   }

- emerson.marini