我已经坚持了一段时间,搜索 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 调用,将其上传到工作正常的服务器,它只是刷新/重新加载页面。
我尝试了很多不同的方法来解决这个问题,但不知道为什么这不起作用。 任何帮助表示赞赏。 谢谢!
最佳答案
这不是直接回答您的问题,但您可以与您的服务器通信(上传文件)而无需以传统方式提交表单,然后根据您的上传方式动态更新您的 HTML。
了解 https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX和 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
关于javascript - 表单提交后防止页面重新加载。 e.preventDefault() 和隐藏的 iFrame 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49262554/