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，问题是什么？

感谢

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;
       //...
     }
   }

带进度条的asp.net视频上传

1 个答案: