Javascript JS在发送帖子后停止侦听事件

我想发送大文件并报告上载状态。这应该很容易，在这个网站上有很多答案来证明这一点。但出于某种原因，它对我来说不起作用，无论是在Firefox还是Chrome上

我有一个表单，其中包含使用以下代码发布的文件（定义为

）：

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响应

控制台没有显示任何消息（甚至没有“开始发送”，更不用说进度了），当我在发送post请求后检查页面时，它显示的好像根本没有任何JS或DOM。i、 e.页面正在显示，但不可检查且不可交互

---

我做错了什么？

您的表单以普通表单的形式提交，因此您应该像这样取消：

let$form=$（'#form'）；
$form.on（'submit'，函数（事件）{
event.preventDefault（）；
//这将停止默认提交，以便您可以手动执行，
//即作为AJAX（XMLHttpRequest）
//你的功能在这里。。。
});

---

以下是有关此处发生的情况的更多信息。

您的表单以普通表单的形式提交，因此您应该像这样取消：

let$form=$（'#form'）；
$form.on（'submit'，函数（事件）{
event.preventDefault（）；
//这将停止默认提交，以便您可以手动执行，
//即作为AJAX（XMLHttpRequest）
//你的功能在这里。。。
});

---

下面是关于这里发生的事情的更多信息。

正如MaksTech所指出的，您需要防止表单的默认操作。忘了他的jQuery部分吧，只有以下几行很重要：

    e.preventDefault();

还有很多其他解决方案，您也可以将表单的操作修改为以下内容

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

---

或者相应地附加该侦听器

您需要防止表单的默认操作，正如MaksTech指出的那样。忘了他的jQuery部分吧，只有以下几行很重要：

    e.preventDefault();

还有很多其他解决方案，您也可以将表单的操作修改为以下内容

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

---

或者相应地附加该侦听器

为什么要麻烦使用jQuery？为什么要麻烦使用jQuery？@inetphantom据我所知，fetch api不提供报告发送了多少数据的方法，它只在完成后返回。。。所以为了满足我的需要，我必须使用XHR。@inetphantom据我所知，fetch api不提供报告发送了多少数据的方法，它只在完成后返回。。。所以对于我需要的，我必须使用XHR。