Comment désactiver le bouton de soumission jusqu'à ce que le fichier soit sélectionné

Question

J'ai une page de téléchargement de fichier HTML et j'ai besoin que le bouton de soumission soit désactivé jusqu'à ce qu'un fichier soit sélectionné. Ensuite, le bouton d'envoi sera activé et l'utilisateur pourra télécharger. Je suppose que je peux utiliser le code jQuery pour interroger la valeur du champ de téléchargement de fichier pour voir si un fichier a été sélectionné pour le téléchargement. Et je suppose que je peux vérifier que chaque fois que le focus a quitté le champ de téléchargement de fichier. Mon souci est que certains navigateurs peuvent agir de manière amusante avec cela et que mes utilisateurs ne peuvent pas télécharger de fichiers.

Existe-t-il un moyen sûr de faire cela, de préférence en utilisant jQuery, où je ne serais pas en danger d'avoir des utilisateurs incapables de télécharger?

Answer 1

Cette jQuery doit fonctionner et est liée à l'événement change() de l'entrée de fichier. Ce code a également applique l'attribut disabled donc, dans le cas où l'utilisateur a désactivé JavaScript, il ne doit pas empêcher la forme utilisée:

$(document).ready(
    function(){ 
     $('input:submit').attr('disabled',true); 
     $('input:file').change(
      function(){ 
       if ($(this).val()){ 
        $('input:submit').removeAttr('disabled'); 
       } 
       else { 
        $('input:submit').attr('disabled',true); 
       } 
      }); 
    }); 

JS Fiddle demo.

Answer 2

Une méthode plus simple consiste à vérifier le champ de fichier lorsque l'utilisateur soumet réellement le formulaire ... de cette façon, vous n'aurez pas à rechercher les modifications de formulaire.

$(function() { 
    $('form').submit(function() { 
     if(!$("form input[type=file]").val()) { 
     alert('You must select a file!'); 
     return false; 
     } 
    }); 
}); 

Ce code est Unobtrusive JavaScript et il ne sera pas gâcher la forme si l'utilisateur ne prend pas en charge JS.

Answer 3

code de David Thomas peut être réglé pour le bouton ID:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%=btInsert.ClientID %>').attr('disabled', true); 
     $('input:file').change(
      function() { 
       if ($(this).val()) { 
        $('#<%=btInsert.ClientID %>').removeAttr('disabled'); 
       } 
       else { 
        $('#<%=btInsert.ClientID %>').attr('disabled', true); 
       } 
      }); 
    }); 
</script>