JS перестает слушать события после отправки сообщения

Question

Я хочу отправить большие файлы и сообщить о статусе загрузки. Это должно быть легко, и на этом сайте есть много ответов, демонстрирующих это. Но по некоторым причинам это не работает для меня, ни в Firefox, ни в Chrome.

У меня есть форма с файлами (определенная как <form id="form" method="post" enctype="multipart/form-data">), которую я публикую с помощью этого кода:

function post() {
    const request = new XMLHttpRequest();
    request.upload.addEventListener("progress", (e) => {
        console.log("progress: " + e.loaded + "/" + e.total);
    });
    request.open("post", formElement.action);
    request.responseType = "json";
    console.log("Start sending");
    request.send(new FormData(document.getElementById('form');));
}

Но в ту минуту, когда я нажимаю кнопку, которая активирует эту функцию, браузер перестает отвечать до тех пор, пока не будет выполнена вся операция, а затем просто отображает ответ json.

Консоль непоказать любое сообщение (даже не «начать отправку», не говоря уже о прогрессе), и когда я проверяю страницу после отправки запроса на публикацию, оно показывает, что на нем вообще нет JS или DOM. то есть страница показывается, но не проверяется и не является интерактивной.

Что я делаю не так?

Answer 1

Вам нужно запретить действие формы по умолчанию, как указал MaksTech. Просто забудьте о его части jQuery, важна только следующая строка:

    e.preventDefault();

Существует множество других решений, которые вы также можете изменить в своей форме следующим образом:

<form onsubmit="event.preventDefault(); post();">

или прикрепите этого слушателя соответственно

Answer 2

Ваша форма отправляется как обычная форма, поэтому вы должны отменить ее следующим образом:

let $form = $('#form');

$form.on('submit', function (event) {
    event.preventDefault();
    // This will stop default submition so you can do it manually,
    // i.e. as AJAX (XMLHttpRequest)

    // Your function goes here...
});

Вот еще немного информации о том, что происходит здесь на официальных документах JQuery .