web-dev-qa-db-fra.com

désactiver le bouton d'envoi jusqu'à ce que le fichier soit sélectionné pour le téléchargement

J'ai un formulaire pour télécharger des images. J'aimerais désactiver le bouton d'envoi jusqu'à ce que l'utilisateur sélectionne une image à télécharger. J'aimerais le faire avec jQuery. Actuellement, j'ai un JavaScript qui empêche l'utilisateur de soumettre le formulaire plusieurs fois en le désactivant lors de l'envoi. Ce serait bien de combiner cette fonctionnalité avec la nouvelle.

Voici ce que j'ai maintenant:

<script type="text/javascript">
function submitonce(theform) {
    //if IE 4+ or NS 6+
    if (document.all || document.getElementById) {
        //screen thru every element in the form, and hunt down "submit" and "reset"
        for (i = 0; i < theform.length; i++) {
            var tempobj = theform.elements[i]
            if (tempobj.type.toLowerCase() == "submit" || tempobj.type.toLowerCase() == "reset")
            //disable em
            tempobj.disabled = true
        }
    }
}
</script>
<form name="form" enctype="multipart/form-data" method="post" action="upload.php" onSubmit="submitonce(this)">
 <input type="file" name="my_field" value="" />
 <input type="submit">
</form>
jqueryfile-uploadwebforms
21
santa

Ce qui suit semble fonctionner de manière fiable dans Chrome et Firefox (Ubuntu 10.10), je ne peux pas vérifier sur les autres plates-formes pour le moment:

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

html

<form action="#" method="post">
    <input type="file" name="fileInput" id="fileInput" />
    <input type="submit" value="submit" disabled />
</form>
<div id="result"></div>

Démo chez JS Fiddle .

42
David Thomas

Manière légèrement plus simple en utilisant prop () qui, à mon avis, est la méthode préférée pour le faire maintenant

$('input:file').on("change", function() {
    $('input:submit').prop('disabled', !$(this).val()); 
});

Testé dans IE, Chrome et FireFox.

15
matt burns

Essayer

   $('#my_uploader').change(function() {
      if($(this).val()) {
        $('#my_submit_button').attr('disabled', '');
      } else {
        $('#my_submit_button').attr('disabled', 'disabled');
      }
    });
4
Aaron Hathaway

Si vous êtes fan d'expressions ternaires: 

$(document).ready(function(){
    var $submit = $('#submit_document');
    var $file = $('#file_path');

    $file.change(
        function(){
            $submit.attr('disabled',($(this).val() ? false : true));
        }
    );
});
1
JayJay

Au lieu de désactiver la soumission, est-il potentiellement plus utile d'offrir des instructions si l'utilisateur appuie dessus sans sélectionner un fichier au préalable? Donc, ajoutez quelque chose comme ceci comme code onclick du submit?

var bFileEmpty = !document.getElementById('filControl').value; if (bFileEmpty) alert('Please select a file'); return !bFileEmpty;

Notez que votre contrôle de fichier aura besoin d’un identifiant ainsi que d’un nom.

0
DJDave