title: A javascript upload progress display in HTML5
body: <p>I am very new to js and html programming. I am using following code to make a progress-bar which displays file upload progress. But it is not working on tryit editor</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;style&gt;
  .progress-wrapper {
      width:100%;
  }
  .progress-wrapper .progress {
      background-color:green;
      width:0%;
      padding:5px 0px 5px 0px;
  }
  &lt;/style&gt;
  &lt;script&gt;
  function postFile() {
      var formdata = new FormData();
  
      formdata.append('file1', $('#file1')[0].files[0]);
  
      var request = new XMLHttpRequest();
  
      request.upload.addEventListener('progress', function (e) {
          var file1Size = $('#file1')[0].files[0].size;
  
          if (e.loaded &lt;= file1Size) {
              var percent = Math.round(e.loaded / file1Size * 100);
              $('#progress-bar-file1').width(percent + '%').html(percent + '%');
          } 
  
          if(e.loaded == e.total){
              $('#progress-bar-file1').width(100 + '%').html(100 + '%');
          }
      });   
  
      request.open('post', '/echo/html/');
      request.timeout = 45000;
      request.send(formdata);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;form id="form1"&gt;
      &lt;input id="file1" type="file" /&gt;
      &lt;div class="progress-wrapper"&gt;
          &lt;div id="progress-bar-file1" class="progress"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;button type="button" onclick="postFile()"&gt;Upload File&lt;/button&gt;
  &lt;/form&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have tried on my local system too,it is not working here too. What I am doing wrong? Please tell me how can I improve the code. I want to display a progress-bar which shows upload percentage of file using ajax calls. </p>