When I put the e.preventdefault() after the code it works, however it refreshes the page.

If I leave it at the beginning of the code, it prevent the other lines to run and don't pull the request.

  function loadPhoto(e){
    e.preventDefault();
    //forming images
    var formData  = new FormData( document.getElementById("uploading") );
    for(var i = 0; i < document.getElementById("up").files.length; i++) {
      console.log(i)
      formData.append("up[]",document.getElementById("up").files[i]);
    }


    var filename = document.getElementById('up');
    alert(filename)
    filename = filename.files[0].name;
    alert(filename)

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/reqUpload');
    xhr.onload = function(){
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        alert(this.responseText)
             document.getElementById('#photo').innerHTML = this.responseText;
    }
    xhr.send(formData);
  }