如何啓用文件上的按鈕選擇？

如果沒有選擇文件並點擊上傳按鈕，我已經聲明瞭驗證的圖片上傳彈出窗口。上傳按鈕被禁用。如何啓用文件上的按鈕選擇？

我需要啓用按鈕，錯誤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

來源

2016-01-12 Raviteja

你必須寫變更事件該文件上傳控制 –

我已更新小提琴https://jsfiddle.net/y85b1npv/5/ –

在選擇文件後仍顯示錯誤div – Raviteja

你必須寫文件輸入變化事件檢查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); 
     }     
     }); 
    });

希望這有助於

來源

2016-01-12 06:25:32

希望它會幫助你:)

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

來源

2016-01-12 06:29:15 Annshuk

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

來源

2016-01-12 06:34:07

如何啓用文件上的按鈕選擇？

回答

相關問題