Question

我已经上传了一个图片上传弹出窗口，如果没有选择文件，我会声明验证并单击上传按钮。并且上传按钮被禁用。

我需要启用按钮，并且在选择文件后错误div必须消失。

HTML

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <label for="file">Upload Image:</label>
                <input type="file" name="file" id="file" accept=".gif, .jpg, .png, .jpeg" style="width: 100%;" />
                <input type="hidden" name="recipeId" value="@ViewBag.RecipeId" />
                <input type="submit" value="Upload" class="submit" id="UploadButton" />

                <div class="row margin-top">
                    <div class="alert alert-danger col-md-12" id="errorMessageDiv" style="display:none;">Please select an Image to Upload.</div>
                </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

的JavaScript

$(document).ready(function () {
        $('#UploadButton').click(function () {
            if ($('#file').val() == "") {
                $('#errorMessageDiv').show();
                $('#UploadButton').prop("disabled", true);
                return false;
            }
            else if ($('#file').val() != "") {
                $('#errorMessageDiv').hide();
                $('#UploadButton').prop("disabled", false);
                return true;
            }
        });
    });

我的Fiddle

Answer 1

您必须编写文件输入更改事件以检查val（）长度

$(document).ready(function () {
        $('#UploadButton').click(function () {
            if ($('#file').val() == "") {
                $('#errorMessageDiv').show();
                $('#UploadButton').prop("disabled", true);
                return false;
            }
            else if ($('#file').val() != "") {
                $('#errorMessageDiv').hide();
                $('#UploadButton').prop("disabled", false);
                return true;
            }
        });

        $('#file').change(function(){
        if($(this).val().length>0)
        {
         $('#errorMessageDiv').hide();
         $('#UploadButton').prop("disabled", false);
        }                 
        });
    });

希望这有帮助

Answer 2

希望它能帮到你:)

 $(document).ready(function () {
            $('#UploadButton').click(function () {
                if ($('#file').val() == "") {
                    $('#errorMessageDiv').show();
                    $('#UploadButton').prop("disabled", true);
                    return false;
                }
            });
            $('#file').change(function(){
             if ($('#file').val() != "") {
                    $('#errorMessageDiv').fadeOut();
                    $('#UploadButton').prop("disabled", false);
                    return true;
                }
             });
        });

Answer 3

JavaScript的：

添加文件更改功能

$(document).ready(function () {
    $('#UploadButton').click(function () {
        if ($('#file').val() == "") {
            $('#errorMessageDiv').show();
            $('#UploadButton').prop("disabled", true);
            return false;
        }
        else if ($('#file').val() != "") {
            $('#errorMessageDiv').hide();
            $('#UploadButton').prop("disabled", false);
            return true;
        }
    });

    $("#file").change(function(){
            if ($('#file').val() == "") {
            $('#errorMessageDiv').show();
            $('#UploadButton').prop("disabled", true);
            return false;
        }else if ($('#file').val() != "") {
            $('#errorMessageDiv').hide();
            $('#UploadButton').prop("disabled", false);
            return true;
        }
    });
});

如何启用文件按钮选择？

3 个答案: