AJAX XHRで進捗状況を表示したい

Question

XHRを使いアップロードの進捗状況を表示するものを作ってます
ソースを実行すると数値は表示されず、
Infinityと出てしまいます
ソースコードにおかしい部分があるのでしょうか？
詳しい方回答お願いいたします

  <script type="text/javascript">
    function ExecUpload() {
      var upload1 = document.getElementById("file_1");
      
      var file1 = upload1.files[0];
      
      var formdata = new FormData();
      formdata.append("file_1", file1);

      var xmlhttp = new XMLHttpRequest();
      xmlhttp.addEventListener("progress", function(e){
      alert(e.total);//アップ中ファイルのトータルサイズが取れてない 0となる
      progress_data = e.loaded / e.total;
      p.innerHTML='progress:'+progress_data;
      }, false);

      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          alert(xmlhttp.responseText);
        }
      };
      xmlhttp.open("POST", "updata.php", true);
      xmlhttp.send(formdata);
    }
  </script>

<font id="p"></font>
<input id="file_1" name="file_1" type="file">
  <a href="javascript:void(0);" onclick="ExecUpload();">アップロード</a>

updata.php

<?php
if(is_uploaded_file($_FILES["file_1"]["tmp_name"])) {
    $tmpPath = $_FILES["file_1"]["tmp_name"];
    $savePath = basename($_FILES["file_1"]["name"]);
    move_uploaded_file($tmpPath , $savePath);
    echo 'OK';
} else {
    echo 'ERROR';
}
?>

Answer 1

ExecUpload()の中の下から2行目

xmlhttp.addEventListener("progress", updateProgress, false);

を以下のようにしてみてください。

if (xmlhttp.upload) {
    xmlhttp.upload.addEventListener("progress", updateProgress, false);
}

あと、関係ありませんがfontタグはHTML5では廃止されていますので、ほかの要素に置き換えましょう。

Comments

[退会済みユーザー]

動作しました！！
ありがとうございます＞＜