我们可以判断用户是否取消了浏览器文件上传吗？

Posted 2021-05-06

在Web浏览器中，当用户单击文件字段以上载文件时，浏览器将显示文件上载对话框（至少在Windows和OSX中）。

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

我们可以看出用户是否点击了转义键（通常会关闭文件对话框）。但是，如果用户点击“取消”或选中“取消”并点击进入该怎么办？

答案

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

为了找出发生了什么，我制作了这个剧本。如果我将它放在输入字段上，则选项卡不会注册，因此我将其放在输入字段的父节点上。其余的工作基于它按照附加的顺序执行处理程序。

如果用户花费超过1/10秒来选择文件（或取消上传），这几乎总是如此。我通过时间戳设置数据，当某个动作发生时会获得输入字段焦点，即不是通过关闭上传对话框（例如通过选择文件或点击转义/点击取消）。如果输入字段在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' );
        }
    });
});

另一答案

是的，让上传按钮首先触发一个功能。

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

记录此服务器端。

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

另一答案

1. 当用户单击“选择文件”按钮时，使用JavaScript事件处理程序来运行函数。
2. 连续运行循环，直到用户点击身体某处。
3. 在循环内部，检查输入文件是否已更改。

或者你可以尝试how-to-detect-when-cancel-is-clicked-on-file-input