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 に答える