Question

我目前正在一个网站上工作，您可以在其中上传文件：

<input type="file" name="file" id="file" class="form-control" />

然后我有一个按钮，您可以按下该按钮上传所选文件：

<button class="btn btn-primary" type="submit">Upload CV</button>

如果选择了文件，我希望按钮可以单击 ONLY 。这有可能使用JS，以及如何？

提前致谢！

Answer 1

使用Jquery：

$(document).ready(
function(){
    $('input:file').change(
        function(){
            if ($(this).val()) {
                $('input:submit').attr('disabled',false);
                // or, as has been pointed out elsewhere:
                // $('input:submit').removeAttr('disabled'); 
            } 
        }
        );
});

在按钮标记中添加禁用的属性。

Answer 2

您可以使用下面的原生JS执行此操作。选择文件后启用该按钮，但如果未选择文件，则禁用该按钮。

var button = document.querySelector('button[type=submit]');

button.disabled = true;

document.getElementById('file').addEventListener('change', function () {
  if (this.value.length > 0) {
    button.disabled = false;
  } else {
    button.disabled = true;
  }
});

<input type="file" name="file" id="file" class="form-control" />

<button class="btn btn-primary" type="submit">Upload CV</button>

Answer 3

你可以使用JQuery作为FullOfQuestions说，但在执行按钮代码之前验证文件是否被选中也是好的！

<input type="file" name="file" id="myFile"/>

<!--Add disabled attribute to the button so that is appears disabled at page load-->
<button id="myBtn" type="submit" disabled>Upload CV</button>

<script type="text/javascript">
        $(function () {

            //when input's value changes
            $("#myFile").change(function () {
                if($(this).val())
                {
                    $("#myBtn").prop("disabled", false);
                }
                else
                {
                    $("#myBtn").prop("disabled", true);
                }
            });

            //when button is clicked
            $("#myBtn").click(function () {
                if($("#myFile").val())
                {
                    console.log("file selected");
                }
            });
        });

</script>

检查是否已选择输入文件？

3 个答案: