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

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

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...
});

有关official JQuery docs此处发生的情况的更多信息。

Answer 2

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

    e.preventDefault();

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

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

或相应地附加该侦听器

发送帖子后，JS停止监听事件

2 个答案: