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

好的，你添加的小提琴大大澄清了你的问题。

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

文件上传输入上的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
});

试试这个！ ;）

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

2 个答案: