防止用户在文件上传时离开页面答案

【问题标题】：Prevent a user to leave page while a file is uploading防止用户在文件上传时离开页面
【发布时间】：2015-11-30 17:39:29
【问题描述】：

我想防止用户在将文件上传到我的服务器时离开我的网站。所以我可以使用这个 javascript 向用户发送警报消息...

 window.onbeforeunload = function() {
       return "Your files are not completely uploaded...";
 }

我遇到的问题是文件上传完成后我不想阻止用户导航。所以基本上我希望只有当用户在上传文件时试图离开网站时才会弹出警报消息。当文件完全上传时，我可以 console.log(“文件上传完成”) 所以我知道我应该在哪里停止这个事件，但我不确定代码应该是什么样子。任何帮助是极大的赞赏。

【问题讨论】：

window.onbeforeunload = null; 应该可以解决问题。另请注意，从 onbeforeunload 处理程序返回的消息不会显示在所有浏览器中。

标签： javascript file-upload navigation

【解决方案1】：

只需放置一个标志并在卸载前检查它，在上传时将其设置为 true，在完成时将其设置为 false。

 window.onbeforeunload = function() {
       if (prevent_leave) {
           return "Your files are not completely uploaded...";
       }
 }

【讨论】：

【解决方案2】：

您可以使用 jQuery 表单插件进行检查。 File upload progress bar with jQuery

它可以让您获取文件上传的百分比，并通过检查它（无论它是否已完成 100%），您可以向用户显示一条警告消息。

【讨论】：

【解决方案3】：

我已经把这个javascript放在用户第一次上传文件的函数中...

window.onbeforeunload = function() {
       var prevent_leave = true;
       if (prevent_leave) {
           return "Your files are not completely uploaded...";
       }
 }

然后我在文件完成后放了这个 javascript..

 window.onbeforeunload = function() {
       var prevent_leave = false;
       if (prevent_leave) {
           return "Your files are not completely uploaded...";
       }
 }

这也符合我的预期。谢谢@jcubic

【讨论】：

为什么要声明这些变量？上面的 if 语句总是会产生真，而下面的总是会产生假。