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

标签 javascript html

我已经坚持了一段时间,搜索 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/AJAXhttps://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

关于javascript - 表单提交后防止页面重新加载。 e.preventDefault() 和隐藏的 iFrame 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49262554/

相关文章:

javascript - 来自数组的 ES6 动态 promise 链接

javascript - 如果 CDN 不可用,则 RequireJS 回退

javascript - Highchart 工具提示在用于日期时不起作用

javascript - 滚动不透明度转移到目标元素和从目标元素转移

javascript - 使用 jquery 的下拉导航链接未在 mvc 中加载有效的 anchor 链接

python - 将下拉值的选定选项的值传递给django数据库

html - line-height属性可以继承父div的height属性还是access所属div的height属性?

javascript - 使用 XML 解析器从用户获取最近的 YouTube 视频

javascript - 如何使用递减运算符解析表达式(例如 "c--")?

html - 如何在鼠标悬停时显示 ul li 结构的子菜单