javascript - 如何启用文件选择按钮？

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);
        }                 
        });
    });

希望对你有帮助