Question

在网络浏览器中，当用户点击文件字段上传文件时，浏览器会显示文件上传对话框（至少在Windows和OSX中）。

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

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

Answer 1

首先，我想强调<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' );
        }
    });
});

Answer 2

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

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

记录此服务器端。

然后，如果在收到其他请求或超时之前没有上传文件，请执行以下操作：用户取消了上传。

Answer 3

当用户点击选择文件按钮时，请使用JavaScript事件处理程序运行功能。
持续运行循环，直到用户点击正文上的某处。
在循环内部，检查输入文件是否已更改。

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

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

3 个答案: