title: Show progressbar only when uploading a file with ajax
body: <p>My problem is, that the progressbar is always visible. I want to see it only, when the upload is in progress, or its complete.</p>
  
  <p>Please comment, if you want to see the php file, that uploads the file to the server.</p>
  
  <p>The upload is working, the problem is only with the progressbar.</p>
  
  <p>My html form:</p>
  
  <pre><code>    &lt;form method="post" id="form" enctype="multipart/form-data" action="files/import_vevo_xls.php"&gt;
                &lt;table class="form"&gt;
                  &lt;tr&gt;    
                      &lt;td&gt;
                          &lt;input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;div id="fileName"&gt;&lt;/div&gt;
                          &lt;div id="fileSize"&gt;&lt;/div&gt;
                          &lt;div id="fileType"&gt;&lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
                &lt;table class="form"&gt;
                  &lt;tr&gt;
                    &lt;td class="last_td_no_border"&gt;
                      &lt;button class="btn saveButton" name="submitButton" type="button" onclick="uploadFile()" id="importButton"&gt;Vevők importálása&lt;/button&gt;
                    &lt;/td&gt;
  &lt;div id="progress" style="display: block;width: 200px;padding: 1px 5px;margin: 1px 0;border: 1px inset #446;border-radius: 4px;"&gt;
  &lt;div id="progressNumber" style="height:5px;background: lime;"&gt;&lt;/div&gt;
  &lt;div id="progressValue" style="text-align: center;"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
              &lt;/form&gt; 
  </code></pre>
  
  <p>And the javascript code:</p>
  
  <pre><code>var mbMaxFilesize = 5242880; // 5 MB
  
  function fileSelected() {
      /* A fajl kiválasztása után, megnézzük a nevét, kiszámítjuk a méretét és kiírjuk a típusát */
      var file = document.getElementById('fileToUpload').files[0];
      if (file) {
          var fileSize = 0;
          if (file.size &gt; 1024 * 1024)
              fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
              fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
  
          document.getElementById('fileName').innerHTML = 'Név: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Méret: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Típus: ' + file.type;
      }
      /* Megvizsgáljuk, hogy nem haladja-e meg a limitünket, az aktuálisan kiválasztott fájl mérete */
      if (file.size &gt; mbMaxFilesize) {
          alert("A fájl mérete maximum 5 MB lehet.");
          xhr.addEventListener("abort", uploadCanceled, false);
          return false;
      }
  }
  
  function uploadFile() {
      /* Maga az XMLHttpRequest indítása. A fajl kivalasztasa esetén itt indítjuk meg a küldést, illetve az eventeket/figyelésüket
      majd meghívjuk az upload.php szerver oldali fájlunkat */
      var fd = new FormData();
      fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener("progress", uploadProgress, false);
      xhr.addEventListener("load", uploadComplete, false);
      xhr.addEventListener("error", uploadFailed, false);
      xhr.addEventListener("abort", uploadCanceled, false);
      xhr.open("POST", "files/import_vevo_xls.php");
      xhr.send(fd);
  }
  
  function uploadProgress(evt) {
      if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').style.width = percentComplete + '%'; /*grafikus kijelzésnek*/
          document.getElementById('progressValue').innerHTML = percentComplete.toString() + '%'; /*érték kijelzésének*/
      } 
      else 
      {
          document.getElementById('progressNumber').innerHTML = 'nem kiszámithato.';
      }
  }
  function uploadComplete(evt) {
      document.getElementById('progressNumber').style.width = 100 + '%'; /*grafikus kijelzésnek*/
      document.getElementById('progressValue').innerHTML = '100' + '%'; /*érték kijelzésének*/
      alert(evt.target.responseText);
  
  }
  function uploadFailed(evt) {
      alert("Hiba, a feltöltés sikertelen.");
  }
  function uploadCanceled(evt) {
      alert("A feltöltést a böngészö megszakitotta.");
  }
  </code></pre>