Загрузка изображения с php / ajax обновляет страницу

Question

Сценарий работает нормально, я использую formData() для загрузки изображения с ajax, и оно корректно загружается в папку, но я не могу понять, почему моя страница обновляется после move_uploaded_file() вызывается в php скрипте.
Это полный код:

index. html

<label>Add picture?</label>
<input type='file' accept='.png,.gif,.jpg' onchange='upload_img(this)'>

script. js

function upload_img(e) {
  let file = e.files[0];
  let formData = new FormData();
  formData.append('file', file);

  let xhr = new XMLHttpRequest();
  xhr.onload = function () {
    // I want to show a message here but the page is being refreshed
    document.getElementById('ajax_result').innerHTML = xhr.responseText;
  }
  xhr.open("POST", "upload_img.php", true);
  xhr.send(formData);
}

upload_img. php

<?php
  if (!empty($_FILES['file'])) {
    var_dump($_FILES['file']);
    $path = "../img_uploads/";
    $path = $path . basename($_FILES['file']['name']);

    if (move_uploaded_file($_FILES['file']['tmp_name'], $path)) {
      echo "The file " .  basename($_FILES['file']['name']) . " has been uploaded";
    }
  }

РЕДАКТИРОВАТЬ:
В целях тестирования я удалил все формы на странице и проблема все еще там.

Answer 1

Может быть, попробуйте сначала xfr.open, а затем xfr.onload