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

控制台没有显示任何消息(甚至没有“开始发送”，更不用说进度了)，当我在发送post请求后检查页面时，它显示好像没有任何JS或完全有 DOM。即页面正在显示，但不可检查且不可交互。

我做错了什么？

Answer 1

正如 MaksTech 指出的那样，您需要防止表单的默认操作。忘记他的 jQuery 部分，只有下面一行是重要的:

    e.preventDefault();

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

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

或相应地附加该监听器