jquery检测输入文件类型返回空

Question

我的网站的墙贴脚本上有一个输入类型文件。我试图在打开和关闭表单框且未选择文件时隐藏输入字段。

$(".file-upload").show().click();

我尝试使用 jquery 更改事件，但是只有在选择文件时才会触发，并且我希望能够检测到空返回

$(".file-upload").show().click().change(function(){
    // this is only triggered when a file is here
    $(this).hide();
});

更新：

$(".file-upload").show().click();
$(".file-upload").change(function(){
    $(this).hide(); // only if .file-upload is empty
});

我希望在用户单击文件输入时触发此功能，并且当对话框打开并且他们没有选择任何内容时，我想再次隐藏文件输入框。

http://jsfiddle.net/7Ra8a/1/

Answer 1

好的，您添加的 Fiddle 大大澄清了您的问题。

本质上，您正在寻找的是在文件输入对话框关闭时运行的回调函数。不幸的是，没有文件上传 API 的标准浏览器实现可以帮助您。但是，基于这个特定的用例，我认为有一种解决方法。

文件上传输入上的change 事件仅在值实际更改时才会运行，而不是在每次打开和关闭对话框时运行。因此，在您现在拥有的代码中，change 事件永远不会触发，因为输入的值实际上从未改变，它只是保持为空。因此，如果您将代码从按钮的click 处理程序中显示输入，并移到文件输入的change 处理程序中，您就可以实现您正在寻找的功能。

$('button').click(function () {
    $(".file-upload").click();
});

// if the dialog returns a file, then show the file input field
$(".file-upload").on('change', function (e) {
    if (e.target.files.length) {
        $(this).show();
    } else {
        $(this).hide();
    }
});

真的，那里的else 块应该没有必要，但我想理论上有人可以添加一个文件然后删除它（我不知道这是否是大多数浏览器支持的功能） ，而这里的 else 块涵盖了这种情况。

Answer 2

 $(".file-upload").click(function (e) {
        e.preventDefault();
        $(this).fadeOut(800, function () {
            $(this).show().fadeIn();
        });
    });

$(".file-upload").on('change', function () {
    $(this).hide(); // only if .file-upload is empty
});

试试这个！ ;)