如何检查是否在 <input type="file"> 元素中选择了文件？答案

【问题标题】：How do I check if a file has been selected in a <input type="file"> element?如何检查是否在 <input type="file"> 元素中选择了文件？
【发布时间】：2014-09-09 18:32:24
【问题描述】：

我有多个复选框和一个文件上传输入。如果选中一个或多个复选框并且输入值不为空，我想重新启用一个按钮。

这是bootply的链接

这是我的html

<div class="upload-block">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="file" id="InputFile">
    <button id="upload-btn" type="button blue-button" 
            class="btn blue-button" disabled>Submit</button>

</div>

这是我的 javascript 起点：通过卡尔更新在所有输入上绑定change 事件，然后使用一些条件：

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

Example

这适用于所有复选框，#InputFile 的值不是 none。即选择文件的位置。但是这在 IE9 中不起作用

如何更新它以在 IE9 中工作？

【问题讨论】：

那么想一想。如何使用 jQuery 获取输入的值？真正快速搜索出现val()。那么，现在你可以得到值了，你如何检查它的长度呢？真正快速的搜索出现了length 属性。如何在已经存在的 if 语句中添加第二个条件？快速搜索出现&& 和||。这是基本的学习过程。你试过了吗？
谢谢克里斯，我知道如何检查我只想正确组合它的值，我认为这是一个很好的问题，但每次我问一个与 jquery 相关的问题时，我都会被否定，因为这个问题很简单。 .
@nolawipetros，StackOverflow 在去年遇到了许多低质量的问题。结果，他们比以前更加严格。我认为它会通过。很多人都在努力让事情变得更好。
@Chris 和 George 谢谢我确实尝试通过 OR 运算符使其工作，但使其工作并不是最有效的，因为在 js 和 jquery 中有很多方法可以做简单的事情。我在回答 q 的 CSS/Bootrap 标签上花费了很多，在我看来 jquery/js 组似乎是最严厉的。无论如何感谢您的投入！

标签： javascript jquery checkbox internet-explorer-9

【解决方案1】：

纯JS：

<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>

<script>
    function buttonSubmitClicked(event) {

        if (!document.getElementById("InputFile").value) {
            event.preventDefault();
            alert("Please choose a file!");
        } else {
            alert("File've been chosen");
        }
    }
</script>

jsfiddle: check it out

【讨论】：

【解决方案2】：

  $('.upload-block input').change(function() {
        if ($('.upload-block :checked').length && $('#InputFile').val() ) {

          $('#upload-btn').prop('disabled',false);
        }
        else {
          $('#upload-btn').prop('disabled',true); 
        }
         });

复选框和输入文件不需要单独的选择器 .upload-block 输入足以捕获复选框和文件值的变化

【讨论】：

【解决方案3】：

我会将验证应用于所有涉及的元素。这种方式更改复选框或输入将更新禁用

$('#InputFile, .upload-block :checkbox').change(function(){
   var isValid= $('.upload-block :checkbox:checked').length  && $('#InputFile').val();
   $('#upload-btn').prop('disabled',isValid);
});

【讨论】：

【解决方案4】：

在所有输入上绑定change 事件，然后使用一些条件：

  $('.upload-block input').change(function() {
    $('#upload-btn').prop(
        'disabled',
        !($('.upload-block :checked').length && $('#InputFile').val()));
  });

Example

【讨论】：

是否可以在 ie9 中完成这项工作？由于某种原因在 IE9 中不起作用
@nolawipetros 我希望我现在可以帮助你，但我无法访问 IE9。但是，根据我的阅读，它应该适用于 ie9：stackoverflow.com/questions/2389341/…。今晚我得去看看。
@nolawipetros 出于好奇，问题出在哪里？
#inputfile 上没有检测到更改，我必须`$('.upload-block input, #Inputfile').change...` 才能工作？跨度>
如何使用原生 JavaScript 做到这一点？

【解决方案5】：

像这样：

if($('#InputFile').val().length){
//do your stuff
}

您可以更好地使用 $.trim() 方法来不允许（修剪）空格：

if($.trim($('#InputFile').val()).length){
//do your stuff
}

【讨论】：

这个比较简单$('#InputFile').val().trim().length
@Samad .trim() 是核心 JavaScript 方法，而 $.trim() 是 jQuery 方法。
谢谢，但是 jQuery 也使用 JavaScript 核心方法来做这件事，并且两者都有相同的结果 _____________ return text==null?"":(text+"").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"");