Question

我已经坚持了一段时间，为所有这些答案清理SO和谷歌，但它们似乎都没有阻止我的问题。我所要做的就是在上传文件后阻止页面重新加载，因为它会重置我想写的动态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();
};

所有这一切都是调用我的后端/上传快速调用，将其上传到服务器工作正常，它只是刷新/重新加载页面。

我尝试了许多不同的方法，并且不知道为什么这不起作用。任何帮助表示赞赏。谢谢！

Answer 1

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

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

表单提交后阻止页面重新加载。 e.preventDefault（）和隐藏的iFrame无法正常工作

1 个答案: