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
});

试试这个！)