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

Question

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

以下是链接到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起点：
由Karl更新
在所有输入框上绑定一个change事件，然后使用一些条件：

这里是我的JavaScript起点：
由Karl更新
对所有输入框绑定一个change事件，然后根据一些条件进行操作：

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

示例

这适用于所有复选框，且 #InputFile 具有非 none 的值，即已选择文件。但在 IE9 中无法正常工作。

我该如何更新以使其在 IE9 中正常工作？

- nolawi

---

仔细思考一下。如何使用jQuery获取输入的值？快速搜索会出现val()。现在你可以获取值了，那么如何检查它的长度？快速搜索会出现length属性。如何向已有的if语句添加第二个条件？快速搜索会出现&&和||。这是基本的学习过程。你试过了吗？ - Chris Baker

谢谢Chris，我知道如何检查值，我只是想正确地组合它，我认为这是一个好问题，但每次我问与jQuery相关的问题时，都会因为问题太简单而被否定。 - nolawi

@nolawipetros，StackOverflow在过去一年中出现了许多低质量的问题。因此，他们比以前更加严格。不过我认为这种情况会过去的。许多人正在努力改善情况。 - 700 Software

@Chris和George，谢谢你们。我确实尝试过使用OR运算符并使其工作，但这并不是最有效的方法，因为在js和jquery中有许多简单的方法可以做到同样的事情。我花了很多时间回答CSS/Bootrap标签的问题，但似乎jquery/js组似乎是最苛刻的。无论如何，感谢你们的意见！ - nolawi

Answer 1

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

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

示例

- Karl-André Gagnon

---

这个能在IE9中运行吗？由于某些原因，在IE9中它不能正常工作。 - nolawi

@nolawipetros 我很希望现在能够帮助你，但我这里没有IE9的访问权限。但是，根据我所读到的，它应该可以在IE9上运行：https://dev59.com/M3E95IYBdhLWcg3wQ7qb。我今晚会去看一下。 - Karl-André Gagnon

@nolawipetros 出于好奇，问题是什么？ - Karl-André Gagnon

更改在#inputfile上没有被检测到，我不得不使用$('.upload-block input, #Inputfile').change...才能使其工作？ - nolawi

我该如何使用本地JavaScript实现这个？ - Oniya Daniel

Answer 2

纯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

- Andrew

Answer 3

就像这样：

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

您可以通过使用$.trim()方法来更好地使用，以避免（修剪）空格：

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

- Bhojendra Rauniyar

---

这是更简单的 $('#InputFile').val().trim().length。 - user5490177

@Samad .trim() 是 JavaScript 的核心方法，而 $.trim() 是 jQuery 的方法。 - Bhojendra Rauniyar

谢谢，但jQuery也使用JavaScript核心方法来执行它，而且两者结果相同。__________ return text==null?"":(text+"").replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,""); - user5490177

Answer 4

  $('.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 input足以捕获复选框和文件值的更改。

- santhosh

Answer 5

我会将验证应用于所有涉及的元素。这样更改复选框或输入内容都将更新禁用状态。

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

- charlietfl