Javascript/jQuery : Make second file input button visible only after first file input button has selected a file

Question

所以我有两个 HTML 输入按钮

    <input type="file" id="filename" name="filename" />
    <input type="file" id="csvfile" name="csvfile" />

这两个文件都需要上传 .csv 文件。我的问题是，如何在加载时隐藏按钮 csvfile(第二个输入按钮)，然后仅在从第一个输入按钮 filename 选择输入文件后才让它可见？我还应该把代码放在方法下面还是外面？

   $(document).ready(function () {
            // map and variables initialization

            // first input button
            $("#filename").change(function (e) {
               // codes and workings   
            });

            // second input button
            $("#csvfile").change(function (e) {
              // codes and workings
            });    
        });

Answer 1

您可以简单地将其隐藏并使用 jQuery show():

$("#filename").change(function (e) {
  if (this.files.length > 0) {
    $("#csvfile").show();
  } else {
    $("#csvfile").hide();
  }
});

$("#csvfile").change(function (e) {
  
});

#csvfile {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color: #DDDDDD;">
  File 1: <input type="file" id="filename" name="filename" />
</div>
<div style="background-color: #BBBBBB;">
  File 2: <input type="file" id="csvfile" name="csvfile" />
</div>

这只是一个最小的工作示例。您可以添加任何其他检查，例如文件类型或大小；或者隐藏整个 div 而不是 input。这取决于你的设计:)