3

我正在尝试使用 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，有什么问题？

谢谢

4

1 回答 1

0

也许这些线上的东西？

  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;
       //...
     }
   }
于 2013-03-21T17:11:04.970 回答