• I've browsing a large file, so I want to show the file browsing progress bar.
• I do not need to use ajax,
• I just want to show the progress bar and progress percentage when browsing or dragging the file from the browser.

But unfortunately i didn't get a reference without ajax that's why i just posting here

sample code

  function uploadFile() {
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "index.php"); 
    ajax.send(formdata);
  }

 function progressHandler(event) {
   _("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + 
   event.total;
   var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
 }


function completeHandler(event) {
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0; //wil clear progress bar after successful upload
}



   <div class="col-md-6">                               
       <label class="lbl mandatory" for="">Image</label>
       <input type="file" name="file1" id="file1" onchange="uploadFile()"><br>
       <progress id="progressBar" value="0" max="100" style="width:300px;"> 
       </progress>
          <h3 id="status"></h3>
        <p id="loaded_n_total"></p>
   </div>