Question

我在页面上有两个文件上传输入，我正在尝试检查是否为这些输入选择了一个文件。如果选择了文件，则运行代码，否则不执行任何操作。

以下是我的代码：

<input id="file1" type="file" class="file1" />
<input id="file2" type="file" class="file2" />

<button class="upload radius small">Upload</button>

$(function() {
  if ($("#file1").val()) { 
    //Run code if file input is selected. Otherwise do nothing...   
  }
  if ($("#file2").val()) { 
    //Run code if file input is selected. Otherwise do nothing...   
  }
});

当我尝试上面的代码时，它不起作用。没有错误被抛出，它只是不起作用。我该如何解决这个问题？

注意：我使用的是jQuery 2.1。

Answer 1

您的代码设置为在DOM准备就绪时运行（通过用$(function () { /* CODE */ });包装表示），我怀疑用户之前是否选择了文件。您似乎希望在单击上传按钮时运行代码。这意味着您需要为其绑定click事件。像这样：

$(function() {
    $("button.upload").on("click", function () {
        if ($("#file1").val()) { 
            console.log("File 1 set"); 
        }
        if ($("#file2").val()) { 
            console.log("File 2 set"); 
        }
    });
});

DEMO： http://jsfiddle.net/PsZNY/

我离开$(function() {});以确保jQuery可以找到上传按钮（当DOM准备就绪时）。

<强>参考文献：

$().on - https://api.jquery.com/on/

Answer 2

在用户上传时，您需要一个事件处理程序来检查是否上传了某些内容，例如：输入“更改”时检查输入是否有值：

<script>
$(function() {
    $("#file1").change(function (){
      if ($("#file1").val()) { 
        console.log('file1 uploaded');
      }
    });
    $("#file1").change(function (){
      if ($("#file2").val()) { 
        console.log('file2 uploaded');
      }
    });
});
</script>

基于文件输入状态运行功能

2 个答案: