浏览器禁止在文件上传时拦截窗口关闭，唯一可控时机是用户主动点击按钮时通过isuploading标志和confirm()提示；beforeunload仅支持返回字符串提示，不可执行同步ui操作或访问上传状态。

HTML 文件上传本身不触发 window.close()，也无法直接绑定“关闭拦截”事件——浏览器根本不允许 JS 拦截用户关闭窗口的动作，更不会为文件上传这个行为单独开放钩子。

为什么不能在文件上传时监听 window.close

现代浏览器（Chrome 120+、Firefox 102+、Safari 16.4+）强制禁止在 beforeunload 或 unload 中执行任何同步 UI 操作，包括 confirm()、alert()，也禁止你“检测是否正在上传”再决定是否拦截。即使你监听了 beforeunload，只要里面调用了 confirm() 或尝试读取 XMLHttpRequest.upload 状态，就会被静默忽略，控制台报 Blocked attempt to show a 'confirm' dialog。

• 文件上传是异步的，而 beforeunload 是同步执行期，无法 await 上传完成
• XMLHttpRequest 和 fetch 都不提供“页面即将关闭时能否取消上传”的 API
• 你无法在 beforeunload 里安全访问 input[type="file"].files 或上传进度，因为此时 JS 执行环境已受限

真正能起作用的关闭提示只发生在按钮点击里

唯一可控的时机，是用户主动点击「提交」「上传」「退出」这类按钮时。这时你可以检查上传状态，并用 confirm() 或更友好的自定义弹窗提醒。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 维护一个 isUploading 标志，在 fetch 或 XMLHttpRequest 发起时设为 true，finally 设为 false
• 给「关闭编辑器」「返回列表」等按钮绑定 click 事件，在回调中判断：if (isUploading) { confirm('上传进行中，确定要离开？'); }
• 如果用户确认离开，可选择 abort() 当前上传（需提前保存 AbortController 实例），但无法保证服务端已接收部分数据
• 避免在 React 的 useEffect(() => { ... }, []) 或 Vue 的 onBeforeUnmount 里做类似逻辑——它们不处于用户手势上下文，confirm() 会被屏蔽

想“拦截关闭”其实是错把需求当技术问题

用户点 × 或刷新，你什么都做不了；能做的只有两件事：一是提前告知风险，二是降低丢失成本。

• 在 beforeunload 中仅返回字符串（如 '文件可能未上传完成'），不加任何逻辑，让浏览器显示统一提示框（文案不可定制）
• 对大文件上传，实现分片 + 断点续传，上传前先存 sessionStorage 记录已传 offset，页面重进可恢复
• 上传过程中禁用「退出」「返回」按钮，或置灰并加 loading 状态，比事后弹 confirm 更有效
• 不要试图监听 visibilitychange 来判断用户是否切走了——它和关闭无关，且移动端常误报

最易被忽略的一点：上传控件本身没有「关闭拦截」能力，所有相关逻辑必须围绕用户明确触发的动作展开，而不是幻想监听某个全局事件就能拦住关闭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！