index.html

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Upload Example</title>
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script type="text/javascript">
    function updateProgress(evt) {
      if (evt.lengthComputable) {
        document.getElementById("output").textContent =
              "Uploaded " + evt.loaded + " of " + evt.total + " bytes";
      }
    }
    function uploadFile() {
      var file_data = new FormData(document.getElementById('filename'));
      $.ajax({
        url: "/upload",
        type: "POST",
        data: file_data,
        processData: false,
        contentType: false,
        cache: false,
        xhr: function() {
          myXhr = $.ajaxSettings.xhr();
          if(myXhr.upload){
            myXhr.upload.addEventListener('progress',updateProgress, false); // for handling the progress of the upload
          }
          return myXhr;
        },
      }).done(function(data) {
          document.getElementById("output").textContent = "Result: " + data;
      });
      return false;
    }
  </script>
</head>

<body>
  <h1>Upload file using standard form upload</h1>

  <form method="POST" action="/upload" enctype="multipart/form-data">
    <label>Select a file:</label><br>
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
  </form>

  <h1>Upload file using Ajax - that also gives progress report</h1>
  <form method="post" id="filename" name="filename" onsubmit="return uploadFile();">
    <label>Select a file:</label><br>
    <input type="file" id="file" name="file" required />
    <input type="submit" value="Upload" />
  </form>
  <br><br><div id="output"></div>
</body>
</html>