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

jQuery Discussion :

Fonction qui ne se lance pas ?


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut Fonction qui ne se lance pas ?
    Bonjour,
    Je suis à la recherche depuis quelques semaines d'un script simple qui permettrait aux utilisateurs d'uploader 3 images dans un dossier temporaire. J'aimerais montrer les images dans une miniature (permettre leur suppression) avant validation du formulaire global et déplacement des images vers un dossier final.

    EDIT le 20/01/12 à 13:15 le problème actuel :

    J'ai de nouveau "tout" rechangé je vais utiliser le plugin jquery form, qui permet d'uploader des images et de récupérer l'url de l'image uploadée.

    J'ai trouvé du code intéressant ici

    Seul souci, c'est que le script proposé côté serveur utilise codelgniter que je ne connais pas du tout. J'ai donc essayé de transcrire ce code en php, pour le traitement de l'upload. voici mon code :

    index.php
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <form id="up" action="upload_php.php" method="post" enctype="multipart/form-data">
    		<input id="file" type="file" name="myFile">
    		<div id="results"></div>
    </form>
    le script jp / jquery (j'ai suivi les exemples de l'API de JqueryForm) :
    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
    		<script type="text/javascript" src="lib/jquery.js" ></script>
    			<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
    		<script type="text/javascript">
    			$(document).ready(function()
    			{   var options ={
    					dataType:  'json', 
    					beforeSubmit: function(){
    					$('#results').html('<img src="img/loading.gif" id="waiting">'); // L'animation de chargement
    					},
    					success:function(data){
    						$('#waiting').remove(); // on supprime l'animation de chargement
    						// Si erreur est set à 1... on annule et on prévient
    						if(data.erreur=='1'){
    							$('#results').html(data.message); // On affiche le message d'erreur dans la div
    						}
    						// Si tout s'est bien passé, on affiche l'image
    						else{
    							$('#results').html('<img src="'+data.image+'" />');
    						}
    					}
     
    				}
     
    				$('#up').submit(function() { 
    					// inside event callbacks 'this' is the DOM element so we first 
    					// wrap it in a jQuery object and then invoke ajaxSubmit 
    					$(this).ajaxSubmit(options); 
     
    					// !!! Important !!! 
    					// always return false to prevent standard browser submit and page navigation 
    					return false; 
    				}); 
     
    				// A la selection d'une image, on submit automatiquement le formulaire
    				$('#file').change(function() {
    					$('#up').submit();
    				});
    			})    
    	</script>
    et enfin ce qui me pose problème, le script côté serveur pour l'upload (en commentaire, le code utilisant codelight)
    upload_php.php
    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
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    <?php
     
    function upload_file(){
     
    	$upload_dir="uploads/";
    	$extensions_valides = array( 'jpg' , 'jpeg' , 'gif' , 'png' );
    	$maxsize=1024*1024;
     
    	//test sur le transfert
    	if ($_FILES['file']['error'] > 0) {
    		$reponse['erreur'] = 1;
            	$reponse['message'] = "Erreur lors du transfert";
    	}
     
    	if ($_FILES['file']['size'] > $maxsize) {
    		$reponse['erreur'] = 1;
            	$reponse['message'] = "Fichier trop gros";
    	}
     
    	$extension_upload = strtolower(  substr(  strrchr($_FILES['file']['name'], '.')  ,1)  );
     
    	if ( !in_array($extension_upload,$extensions_valides) ) {
    		$reponse['erreur'] = 1;
            	$reponse['message'] = "Fichier incorrect";
    	}
     
    	//Créer un identifiant difficile à deviner
    	$nom = md5(uniqid(rand(), true));
    	$nom = $nom.$upload_dir;
     
    	//déplacement des fichiers
    	$resultat = move_uploaded_file($_FILES['file']['tmp_name'],$nom);
    	if (!$resultat) {
    		$reponse['erreur'] = 1;
        		$reponse['message'] = "echec du transfert vers uploads.";
    	}
    	 if ($reponse['erreur']==1) {
    	    // On fait l'echo de l'array en encodant en json
            	echo json_encode($reponse);
    	}else {
    		// On retourne l'url de l'image
    		$img_url = base_url().$nom;
    		$reponse['erreur'] = 0;
           		 $reponse['image'] = $img_url;
           		 // On fait l'echo de l'array en encodant en json
          		  echo json_encode($reponse);
    	}
    }
        // // Configuration upload de fichier
        // // $config['upload_path'] = 'uploads/'; // dossier où l'on stocke les fichiers
        // // $config['allowed_types'] = 'png|jpg|gif'; // type de fichiers, ici des images
        // // $this->upload->initialize($config);
     
        // // Si l'upload n'a pas réussi, on renvoit une erreur (1)
        // if(!$this->upload->do_upload()):
                        // // Important : les erreurs renvoyées par CodeIgniter sont pré-formatées en HTML, on vire donc les tags
            // $erreur = strip_tags($this->upload->display_errors());
            // // On prépare une array...
            // $reponse['erreur'] = 1;
            // $reponse['message'] = $erreur;
            // // On fait l'echo de l'array en encodant en json
            // echo json_encode($reponse);
        // else:
            // // Si le fichier a bien été uploadé, on renvoit 0 en erreur + les infos du fichier
            // $fileInfos = array('upload_data' => $this->upload->data()); // On crée une array pour faciliter la récupération d'infos fichier
            // $img_url = base_url().'uploads/'.$fileInfos['upload_data']['file_name']; // On va renvoyer ici l'adresse du fichier
            // // On prépare une array...
            // $reponse['erreur'] = 0;
            // $reponse['image'] = $img_url;
            // // On fait l'echo de l'array en encodant en json
            // echo json_encode($reponse);
        // endif;
    }
    Mon script js semble ok maintenant puisque firebug m'indique que la requete POST a été effectuée, mon gif indiquant que l'upload est en cours est également présent, le souci vient donc du php.. J'ai dû commette une erreur, utiliser une fonction inconnue.. je ne sais pas bien comment debuguer cela.. L'image n'est pas transférée dans mon dossier uploads/ en tout cas, il doit donc y avoir une erreur avant "//déplacement des fichiers"

  2. #2
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    Mon listing se mets à jour, (s'il y a des images dans uploads/ il les affiche) mais impossible d'uploader des images, pas d'erreur en console ou avec firebug et comme dit plus haut, je pense que mon php côté serveur n'est pas appelé, mais pourquoi..?
    A mon avis, si tu includais aussi "upload_test1.php", ça risquerait plus d'appeler ce fichier...

    pas d'erreur en console ou avec firebug
    Bien que je ne sois pas spécialiste, comme c'est du PHP et pas du js, ça ne me surprend pas...

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Bonjour et merci pour ta réponse, je ne comprends pas ta demande en fait.
    Dans ma page d'index, mon formulaire possède 'action="upload_test1.php"' donc a priori lorsqu'en JS on met $('formImg').submit(); cela devrait soumettre le formulaire et donc lancer la page en question n'est-ce pas ?

  4. #4
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 497
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 497
    Billets dans le blog
    1
    Par défaut
    excuse-moi ; je n'avais pas vu que c'était l'action d'un formulaire, mais le fait qu'il n'y ait pas de champ submit explique peut-être que l'action ne soit pas appelée ; reboulette : je n'avais pas vu non plus le dans la fonction "envoyer" ; mais pourquoi envois-tu ça dans une iframe ? Essaie pour voir de ne pas mettre de target (moi, je n'en aurais pas mise).
    Et pour info, autrefois, quand j'avais eu à faire pareil : visu d'une image par une vignette, puis éventuellement upload, j'avais utilisé ce script jquery (un script js qui appelle une fonction PHP : je n'y aurais pas crû si on me l'avait dit...)

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Août 2008
    Messages
    66
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2008
    Messages : 66
    Par défaut
    Comme je l'ai dit en fait je débute, et j'ai besoin d'une base. ce code n'est pas de moi, mais je souhaite partir d'un truc simple, (j'ai déjà essayé de m'approprier un script jquery, et c'est trop compliqué, je préfère réinventer la roue) me l'approprier et le refaire à ma sauce. L'iframe ne sera bientôt plus là, c'est une vieille technique. je ferai l'affichage par le DOM joliment et en JS avec Jquery. Un fois que j'aurai compris pourquoi mon script php n'est pas lancé...

    Pour l'histoire de la target.. je ne sais pas vraiment à quoi elle sert.. si je l'enlève, cela ne change rien.. Mon problème paraît "simple" étant donné que j'ai récupéré ce code, qui date un peu.. mais je n'arrive pas à savoir ce qui cloche, je ne suis pas encore assez calé en ce qui concerne l'appel de script externes et l'échange de données..

  6. #6
    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 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    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 659
    Billets dans le blog
    1
    Par défaut
    selecteur id en jquery = #

    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Fonction qui ne se lance pas
    Par ingeniomatique dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/06/2011, 15h32
  2. fonction qui ne se lance pas
    Par le_voisin dans le forum Débuter
    Réponses: 3
    Dernier message: 26/01/2009, 09h50
  3. [DOM] fonction javascript qui ne se lance pas
    Par line86 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 11/08/2008, 14h48
  4. mmc.exe qui ne se lance pas
    Par r0d dans le forum Autres Logiciels
    Réponses: 2
    Dernier message: 27/04/2005, 17h11

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