我们能否检测到用户取消了浏览器文件上传？

Question

在Web浏览器中，当用户点击文件字段以上传文件时，浏览器会显示一个文件上传对话框（至少在Windows和OSX中是这样）。

假设用户改变了主意并取消了文件上传。我们能找出来吗？

如果用户按下了Esc键（通常关闭文件对话框），我们可以找到。但是如果用户点击“取消”或切换到“取消”并按Enter呢？

- Jumbalaya Wanton

---

这取决于用于上传文件的方法。iFrame、Ajax等。你肯定可以捕获这些事件并处理它们，但同样也取决于你使用的上传方式。 - Jose

你为什么不检查所述文件输入字段的值属性？ - Sumurai8

@Jose 我不这么认为。这很简单。如果用户在本机操作系统文件选择对话框上点击取消，我们要么可以知道，要么就不知道。我不关心对话框关闭后发生了什么。 - Jumbalaya Wanton

@Sumurai8 我在文件字段上附加了一个 blur() 事件。我希望它始终运行，除非模糊发生是因为文件选择框被打开。我认为这是不可能的，所以下一个最好的方法是检测是否已取消并适当地处理事件。 - Jumbalaya Wanton

Answer 1

首先，我想强调的是<input type="file" />不会自动上传文件，除非您使用ajax或用户提交表单。用户只是告诉浏览器在某个时刻提交表单时可以在哪里找到文件。

为了找出发生了什么，我编写了这个脚本。如果我将其放在输入字段上，tab无法注册，因此我将其放在输入字段的父级上。其余部分基于它按附加顺序执行处理程序的原理。

如果用户需要超过1/10秒的时间来选择文件(或取消上传)，这几乎总是情况。我会在发生某个动作时设置带有时间戳的数据，该动作将获取输入框焦点，而不是通过关闭上传对话框来实现(例如，选择文件或按下ESC/点击取消)。如果在发生这种情况时，输入框在1/10秒内获得焦点，我就知道这不是我们要找的事件。第二件事是检查值是否发生变化。如果用户取消对话框，值不会改变。那时用户已经取消了对话框……但仍然想上传同一个文件。如果值确实发生了变化，那么用户改变了想要上传的文件。然而，在用户提交表单之前，文件不会更新。

---

HTML：

<input type="file" id="example" />

Javascript（使用jQuery）：

$(document).ready( function() {
    $('#example').parent().on( 'keydown', function(e) {
        var key = e.key || e.keyCode || e.which;
        if( key == "Tab" || key == 9) {
            $('#example').data( 'actiontime', +new Date() );
        }
    } );

    $('#example').on( 'blur', function() {
        $(this).data( 'lastval', $(this).val() );
    } ).on('mousedown', function() {
        $(this).data( 'actiontime', +new Date() );
    } ).on('focus', function() {
        var fastevents = new Date() - $(this).data( 'actiontime' ) < 100;
        if( $(this).data( 'lastval' ) == undefined ) {
            console.log( 'First run' );
        } else if( $(this).data( 'lastval' ) != $(this).val() && !fastevents ) {
            console.log( 'Input changed' );
        } else if( !fastevents ) {
            console.log( 'User canceled dialog somehow' );
        } else {
            console.log( 'Other event' );
        }
    });
});

- Sumurai8

Answer 2

是的，首先让上传按钮触发一个函数。

然后发送一个关于它的服务器Ajax请求。

在服务器端记录日志。

然后，如果在收到另一个请求或超时之前没有上传文件，则表示用户取消了上传。

- The D Merged

Answer 3

1. 当用户点击 选择文件 按钮时，使用 JavaScript 事件处理程序来运行函数。

2. 持续运行一个 循环 直到用户在 body 上点击任意位置。

3. 在循环中，检查输入文件是否已更改。

或者您可以尝试 如何检测在文件输入上单击取消时的操作

- RupamDotInfo

---

这真的能行吗？ 我的意思是，如果您同步阻塞线程，我认为在body上的onclick处理程序不起作用。无论如何，同步阻塞通常被视为不良实践。 - Aidy J