Question

我正在尝试隐藏表单的提交按钮，直到使用jQuery选择了某种文件。

<input type="file" id="file">
<input type="submit" id="submit">

if($("#file:contains('.png')")) {
    alert("Yep, that's a PNG image");

    $('#submit').show();
}

无论涉及什么价值或元素，jQuery都会不断返回true，只要页面加载警报就会出现，并通知我文件输入包含“.png”

顺便说一下，我知道这不是真正做到这一点的正确方法。我相信你可以通过使用inspect元素解决这个问题。

Answer 1

使用选择器调用jQuery将始终返回一个jQuery对象，这总是真实的，这就是if条件始终返回true的原因。

同样:contains检查元素的文本内容，而不是值，因此您需要检查文件的值是否具有.png

$('#file').change(function() {
  var png = /\.png$/.test($('#file').val());
  if (png) {
    alert("Yep, that's a PNG image");
  }
  $('#submit').toggle(png);
})

#submit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="file">
<input type="submit" id="submit">

Answer 2

<强> DEMO

我希望你能在change event input file中这样做。所以我建议在下面解决这个问题：

$('#file').change(function(e){
      var file = $(this).val();
      if(file!="" && file != null)
      {
          var ext = file.split('.').pop();//get the type
          if(ext=="png")
          {
               alert("Yep, that's a PNG image");
               $('#submit').show();
          }
          else
          {
               alert("Yawk!! Bad file");
               $('#submit').hide();
          }
      }
});

无论涉及什么价值或元素，if（element：contains）都会不断返回true

2 个答案: