IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

valider formulaire "file" sans avoir à cliquer sur "submit"?


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut valider formulaire "file" sans avoir à cliquer sur "submit"?
    Bonjour à tous je souhaiterais faire un truc qui me paraissait simple et qui pourtant est bien compliqué, arf!
    Je souhaiterais pouvoir valider mon formulaire d'upload de type "file" sans avoir à cliquer sur le bouton "submit". Alors voila mon code qui est un mix de tout ce que j'ai pus trouver sur le net mais ca fonctionne toujours pas ?


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <form method="post" name="form" enctype="multipart/form-data" action="#">
    <p>
    <!---- Taille maxi de l'upload en octets ---->
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
     
    <input onchange="document.form.submit();" type="file" name="fichier" size="30">
    <input type="submit" name="upload" value="Uploader">
    </p>
    </form>

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <form name="myform" action="javascript:alert(document.getElementById('fichier').value)" method="post" >
    <input onchange="document.forms['myform'].submit();" type="file" name="fichier" id="fichier" size="30">
    </form>
    ça fonctionne ....

    masi pas très ergonomique... si tu te goures de fichier ... c'est parti !

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onchange="this.form.submit();"

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    Alors pour "Space Frog" merci mais c'est pas vraiment ça que j'veu faire!!!

    Et pour "Bovino" jai fais :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     
    <form method="post" name="form" enctype="multipart/form-data" action="#">
    <p>
    <!---- Taille maxi de l'upload en octets ---->
    <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
     
    <input onchange="this.form.submit();" type="file" name="fichier" size="30">
    <input type="submit" name="upload" value="Uploader">
    </p>
    </form>
    Mais toujours pas de changement, arf!!!

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    je testais juste la possibilité d'envoyer un form dynamiquement sur le onchange d'un input type file

    Alors pour "Space Frog" merci mais c'est pas vraiment ça que j'veu faire!!!
    Alors explique ce que tu cherches à faire ...

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    Il faudrait quen cliquant sur le bouton parcourir, la fenetre pour choisir le fichier s'ouvre, normal et ca serai lorsque l'on clic sur ouvrir que le fichier est automatiquement soumis, sans que l'on ai à cliquer sur le bouton "uploader"... Je sais que c'est possible mais je sais pas comment, ausecour

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    ben c'est pas ce que fait mon code ????

    j'ai juste simulé la soumission en mettant un alert dans l'action (pour test) mais si tu laisse le fichier de destination dans l'action il me semble bien que c'est exactement ce que fait mon code ???

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    mince mince mince j'y arrive vraiment pas! arf! faut dire que j'suis pas doué en javascript aussi ci-dessous mon code avec ton model et plus d'éléments :


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <form name="myform" action="javascript:document.getElementById('upload').value" method="post" >
    			<input onchange="document.forms['myform'].submit();" value="" type="file" name="upload" id="upload" size="30">
    		</form>
     
     
     
     
     
     
     
     
    		<?php
                      /*************************************/
                     /*** Valeurs du formulaire d'upload
                    /*************************************/         
                    if( isset($_POST['upload']) )
                    {
                            // variables disponibles
                                                    $nom_photo = $_FILES['fichier']['name']; //Le nom original du fichier, comme sur le disque du visiteur, (exemple: mon_icone.png).
                                                    $extension_photo = $_FILES['fichier']['type']; //Le type du fichier. Par exemple, cela peut être "image/png"
                                                    $taille_fichier = $_FILES['fichier']['size']; //La taille du fichier en octets
                                                    $fichier_tmp = $_FILES['fichier']['tmp_name']; //L'adresse vers le fichier uploadé dans le répertoire temporaire
                                                    $erreur = $_FILES['fichier']['error']; //Le code d'erreur, qui permet de savoir si le fichier a bien été uploadé     
                            // dossier photos
                                                    $dossier_photos = '../../photos/'; 
                            // on vérifie si le fichier temporaire est présent
                                                    if( !is_uploaded_file($fichier_tmp) )
                                                    {
                                                            exit("Le fichier est introuvable.");
                                                    }
                            // on vérifie l'extension
                                                    if( !strstr($extension_photo, 'jpg') and !strstr($extension_photo, 'jpeg') and !strstr($extension_photo, 'bmp') and !strstr($extension_photo, 'gif') and !strstr($extension_photo, 'png') and !strstr($extension_photo, 'tiff'))
                                                    {
                                                            exit("Les fichiers avec l'extension $extension_photo ne sont pas autorisés.");
                                                    }
                            // on vérifie le poid maximum de la photo (10mo)
                                                    if ($taille_fichier > 10000000)
                                                    {
                                                            exit("Votre photo est trop volumineuse, merci d'en réduire la taille.");
                                                    }
                            // on vérifie la taille minimum de la photo en pixels (100x100px)                      
                                                    $taille_photo = getimagesize($fichier_tmp);
                                                    if ($taille_photo[0] < 100 OR $taille_photo[1] < 100)
                                                    {
                                                            exit("Votre photo est trop petite, merci d'en choisir une de meilleure qualité.");
                                                    }
                            // On renomme le fichier puis on le copie dans le dossier de destination
                                                    $nom_photo_renomme = md5(uniqid(rand(), true)); // uniquid() Génère un identifiant unique basé sur la date et heure courante en microsecondes.
                                                    $extension_photo = strtolower(strrchr($nom_photo, '.')); //strrchr renvoie l'extension avec le point // strtolower met l'extension en minuscule
                                                    $nom_photo_renomme_avec_extension = $nom_photo_renomme . $extension_photo;
                                                    
                                                    
                                                    if( !move_uploaded_file($fichier_tmp, $dossier_photos . $nom_photo_renomme_avec_extension) )
                                                    {
                                                            exit("Une erreur s'est produite, impossible de copier le fichier dans $dossier_photos");
                                                    }
                            //Envoi en cours, merci de patienter...
                            $_SESSION['bouille']['photo']['boite_1']['photo_1'] = $nom_photo_renomme_avec_extension;
                            echo 'Votre photo a bien été envoyée.';
                    }
                    ?>

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    action="javascript:document.getElementById('upload').value"


    dans action tu mets la page de traitement du form ....

    Tu voudrais que la page de traitement soit celle selectionnée dans le input type file ?

  10. #10
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    oui en effet, car il s'agit d'un formulaire qui permettrait d'uploader des photos présentes sur le disque dur puis à laquelle je soumet plusieurs traitements en php sur la photo puis elle est envoyé sur le serveur.
    et le code en php qui récupere le POST se trouve sur la meme page que le bouton parcourir...

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    puis à laquelle je soumet plusieurs traitements en php sur la photo puis elle est envoyé sur le serveur.

    Et par quel miracle veux-tu effectuer des traitements en PHP avant de l'avoir envoyée sur le serveur ???

  12. #12
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    oui enfin sur l'image tmp je voulais dire mais bon !!!

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 663
    Points
    66 663
    Billets dans le blog
    1
    Par défaut
    c'est pas clair ton truc ...

  14. #14
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par wwwbillgates Voir le message
    oui enfin sur l'image tmp je voulais dire mais bon !!!
    Citation Envoyé par SpaceFrog Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    action="javascript:document.getElementById('upload').value"
    La question reste la même, à quel moment crois-tu que l'image est envoyée au serveur dans ton code ?

  15. #15
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    Béh quand j'ouvre une image de mon disque et que je clique sur mon bouton uploader elle part sur le serveur sans problème. Je cherche simplement à supprimer le bouton uploader pour que l'image aye sur mon serveur sans avoir à cliquer sur le bouton.
    Après si j'utilise pas les bons termes c'est parce que je débute

  16. #16
    Membre du Club
    Profil pro
    Inscrit en
    Février 2010
    Messages
    70
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 70
    Points : 41
    Points
    41
    Par défaut
    Bonsang ayé jai trouvé :
    Alors j'ai pus lire sur un site que le formulaire de type file renvoyait un array $_FILES et apparement dès lors ou le bouton "envoyer" n'est plus utiliser on peut récupérer le $_FILES et non une variable portant le nom du bouton ahlala que d'aventure


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <form method="post" id="form_file" enctype="multipart/form-data" action="#">
    	<p>		   
    		<input  type="file" onchange="document.getElementById('form_file').submit()" name="fichier" size="30">
    	</p>
    </form>
     
     
     
    <?php
    		  /*************************************/
    		 /*** Valeurs du formulaire d'upload
    		/*************************************/		
    		if( isset($_FILES) )
    		{
    			// variables disponibles
    						$nom_photo = $_FILES['fichier']['name'];
     ......................................
    ......................................
    ......................................
    Merci à tous

Discussions similaires

  1. [Unity 5] Dust Storm inactive par défaut sans avoir cliquer sur "simulate"
    Par krizentherm dans le forum Unity
    Réponses: 5
    Dernier message: 11/05/2015, 18h46
  2. Réponses: 1
    Dernier message: 11/05/2009, 20h33
  3. Réponses: 1
    Dernier message: 01/03/2007, 12h10
  4. Entrer dans une session sans devoir cliquer sur ok au demarr
    Par beegees dans le forum Windows Serveur
    Réponses: 3
    Dernier message: 22/12/2005, 10h50
  5. Saisir le choix sans avoir à appuyer sur Enter
    Par b_steph_2 dans le forum C++
    Réponses: 7
    Dernier message: 12/07/2005, 11h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo