javascript - 表单提交后防止页面重新加载。 e.preventDefault() 和隐藏的 iFrame 不工作

Question

我已经坚持了一段时间，搜索 SO 和 Google 以获取所有这些答案，但它们似乎都不能阻止我的问题。我想要做的就是防止在上传文件后重新加载页面，因为它会重置我想在之后编写的动态 html。

这是 HTML:

<form id = "fileForm" action = "/upload" method = "post" enctype = "multipart/form-data" target = "hiddenIFrame">
    <iframe id = "hiddenIFrame" name = "hiddenIFrame" style = "display: none"></iframe>
    <input type = "file" id = "fileInput" name = "uploadFile" accept = ".txt"/>
</form>

这是JS:

document.getElementById("fileInput").onchange = function(e) {
    document.getElementById("fileForm").submit();
};

然后所做的就是调用我的后端/upload express 调用，将其上传到工作正常的服务器，它只是刷新/重新加载页面。

我尝试了很多不同的方法来解决这个问题，但不知道为什么这不起作用。任何帮助表示赞赏。谢谢!

Answer 1

这不是直接回答您的问题，但您可以与您的服务器通信(上传文件)而无需以传统方式提交表单，然后根据您的上传方式动态更新您的 HTML。

了解 https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX和 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest