javascript - 检查文件上传是否在客户端没有执行任何操作

Question

如您所知，我可以单击“文件上传”按钮来查看“打开文件”对话框，但我无法选择任何内容，只需关闭或取消它即可。我需要找到这个事件并用它来做一些事情。例如，如果 FileUpload 被触发并且用户没有选择任何文件，那么我会隐藏一个按钮。

这是一个函数，当您选择输入文件按钮时将调用该函数，如果您取消选择文件，它将使按钮不可见。

        function CancelCheck(element) {
        var file = elemeny.files[0];
        if (file == undefined)
            document.getElementbyId("Btn1").style.visibility = 'hidden';
        }

这是我的输入文件控件:

<input id="Upload1" type="file" name="file" onchange="javascript:CancelCheck(this)" runat="server" accept=".txt" />

如果您之前选择了一个文件(我的意思是输入文件包含一个文件)，它将起作用，但如果您第一次单击 int 并取消它，则它将不起作用。

希望我足够清楚。

Answer 1

没有这样的事件，但有一些脏解决方案。不过，除非确实有必要，否则我不会推荐它。

因此，我们应该考虑单击“取消”按钮时会发生什么 - 浏览器和 HTML 文档获得焦点。为了处理“对话框取消事件”，我们可以在 HTML 主体上附加一个 onfocus 事件的事件处理程序(例如)。一旦到达此处理程序，我们必须将其删除，然后我们可以检查文件 uploader 的值是否为空。

这里是示例:

HTML

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

JavaScript

var fileUpload = document.getElementById('fileUpload')

fileUpload.addEventListener('click', onUploadClick);

function onUploadClick() {
    document.body.addEventListener('focus', onBodyFocus, true);
}

function onBodyFocus() {
    setTimeout(function() {
        if(!fileUpload.value || !fileUpload.value.length) 
        {
            alert('cancelled');
        }
    }, 100);

    document.body.removeEventListener('focus', onBodyFocus);
}

Click for JsFiddle demo