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

Langage PHP Discussion :

formulaire avec upload de photo


Sujet :

Langage PHP

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

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

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 460
    Points : 5 824
    Points
    5 824
    Billets dans le blog
    1
    Par défaut formulaire avec upload de photo
    Bonjour,

    je fais un formulaire avec upload de photo, et je voudrais que les infos saisies dans le formulaire soient regroupées avec le nom de la photo dans le même enregistrement MySQL. Or l'upload de la photo ne fait pas partie du formulaire html, mais sera fait en dehors. Si on suppose que l'action du formulaire est exécutée avant l'upload de la photo, une ligne MySQL sera créée avec les infos contenues dans le formulaire ; donc il faudrait mémoriser l'identifiant de cette ligne, pour que quand on fera l'upload de la photo, on puisse rajouter le nom de la photo à cette ligne. J'expose ici mon idée pour savoir ce que vous en pensez : lors de l'action du formulaire, je mémorise l'identifiant dans une variable de session et ainsi quand je fais l'upload, je peux récupérer l'identifiant. Et dès que l'identifiant est récupéré par l'upload, la variable de session est vidée. Mais comme on n'est pas sûr que l'upload soit effectué, sur l'événement "load" de la page d'accueil, je vide aussi cette variable de session. Que pensez-vous de mon idée ?

  2. #2
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 389
    Points : 10 422
    Points
    10 422
    Par défaut
    Je pense que c'est très compliqué. Pourquoi ne met tu pas un champ pour indiquer le nom de la photo en même temps que le formulaire d'upload ?

    Sinon, si tu veux absolument les séparer, je commencerais plutôt par faire l'upload de la photo, et ensuite j'enregistrerais son nom.

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

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

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 460
    Points : 5 824
    Points
    5 824
    Billets dans le blog
    1
    Par défaut
    Ce n'est pas que je tiens à les séparer, mais que je ne sais pas faire autrement : pour faire l'upload, je recours à un plugin jquery (un script js :
    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
    74
    75
    76
    77
    78
      <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
     
      <script type="text/javascript" src="js/swfupload/swfupload.js"></script>
     
      <script type="text/javascript" src="js/jquery.swfupload.js"></script>
     
      <script type="text/javascript">
    $(function(){
    $('#swfupload-control').swfupload({
    upload_url: "upload-file.php",
    file_post_name: 'uploadfile',
    file_size_limit : "10485760",
    file_types : "*.jpg;*.png;*.gif",
    file_types_description : "Image files",
    file_upload_limit : 5,
    flash_url : "js/swfupload/swfupload.swf",
    button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
    button_width : 114,
    button_height : 29,
    button_placeholder : $('#button')[0],
    debug: false
    })
    .bind('fileQueued', function(event, file){
    var listitem='<li id="'+file.id+'" >'+
    'Fichier: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KO) <span class="progressvalue" ></span>'+
    '<div class="progressbar" ><div class="progress" ></div></div>'+
    '<p class="status" >Pending</p>'+
    '<span class="cancel" >&nbsp;</span>'+
    '</li>';
    $('#log').append(listitem);
    $('li#'+file.id+' .cancel').bind('click', function(){
    var swfu = $.swfupload.getInstance('#swfupload-control');
    swfu.cancelUpload(file.id);
    $('li#'+file.id).slideUp('fast');
    });
    // start the upload since it's queued
    $(this).swfupload('startUpload');
    })
    .bind('fileQueueError', function(event, file, errorCode, message){
    alert('La taille du fichier '+file.name+' est plus grande que la limite');
    })
    .bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
    //$('#queuestatus').text('Fichier s&eacute;lectionn&eacute; : '+numFilesSelected+' / Queued Files: '+numFilesQueued);
    })
    .bind('uploadStart', function(event, file){
    $('#log li#'+file.id).find('p.status').text('En cours...');
    $('#log li#'+file.id).find('span.progressvalue').text('0%');
    $('#log li#'+file.id).find('span.cancel').hide();
    })
    .bind('uploadProgress', function(event, file, bytesLoaded){
    //Show Progress
    var percentage=Math.round((bytesLoaded/file.size)*100);
    $('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
    $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
    })
    .bind('uploadSuccess', function(event, file, serverData){
    var item=$('#log li#'+file.id);
    item.find('div.progress').css('width', '100%');
    item.find('span.progressvalue').text('100%');
    var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >voir</a>';
    item.addClass('success').find('p.status').html('Fait!!! | '+pathtofile);
    })
    .bind('uploadComplete', function(event, file){
    // upload has completed, try the next one in the queue
    $(this).swfupload('startUpload');
    })
    }); </script>
     
      <style type="text/css">
    #swfupload-control p{ margin:10px 5px; font-size:0.9em; }
    #log{ margin:0; padding:0; width:500px;}
    #log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
    #log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
    #log li .progress{ background:#999; width:0%; height:5px; }
    #log li p{ margin:0; line-height:18px; }
    #log li.success{ border:1px solid #339933; background:#ccf9b9; }
    #log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
      </style>
    , qui contient le formulaire pour sélectionner le fichier et qui lui-même appelle un script 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
    <?php
    //deb
     
    $file_renamed=$_FILES['uploadfile']['name'];
     
    $file_renamed=utf8_decode($file_renamed);
    $file_renamed = strtr($file_renamed,  "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ",   
    			"aaaaaaaaaaaaooooooooooooeeeeeeeecciiiiiiiiuuuuuuuuynn");  
    // === on supprime les espaces
    $file_renamed=str_replace(" ","_",$file_renamed); 
    //fin
     
    $uploaddir = './uploads/'; 
     
    $file = $uploaddir . basename($file_renamed);
    $size=$_FILES['uploadfile']['size'];
    if($size>10485760)
    {
    	echo "error file size > 10 MB";
    	unlink($_FILES['uploadfile']['tmp_name']);
    	exit;
    }
    chmod($_FILES['uploadfile']['tmp_name'],0777);
     
     
    if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) {
      echo "success"; 
     
    } else {
    	echo "error ".$_FILES['uploadfile']['error']." --- ".$_FILES['uploadfile']['tmp_name']." %%% ".$file."($size)";
    }
    ?>
    , qui, lui, fait l'upload)(l'intérêt de ce script jquery, c'est que pendant l'upload, on a une barre de progression), donc je ne sais pas regrouper le tout : donc comment puis-je regrouper les infos que j'obtiendrais avec un formulaire html et le nom du fichier uploadé ?

    Le code html qui lance le script jquery est le suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     <div id="swfupload-control">
            <p>T&eacute;l&eacute;charger votre photo (jpg, png, gif), ayant une taille maximale de 10MO</p>
            <input id="button" type="button">
            <p id="queuestatus"></p>
            <ol id="log">        
            </ol>
            </div>
    et si je comprends le script PHP appelé (que j'ai fortement remanié), je ne comprends presque rien au script js.

  4. #4
    Membre expérimenté

    Profil pro
    Inscrit en
    Août 2002
    Messages
    1 060
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2002
    Messages : 1 060
    Points : 1 357
    Points
    1 357
    Par défaut
    Bonjour,

    Pour le téléchargement de fichiers, tout est là : http://www.php.net/manual/fr/feature...ost-method.php

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

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

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 460
    Points : 5 824
    Points
    5 824
    Billets dans le blog
    1
    Par défaut
    Merci ; je pensais initialement recourir, comme je le disais, à un script jquery, qui aurait permis de faire un truc visible ici, mais ne sachant l'intégrer dans un formulaire html, je vais finalement me rabattre sur la solution classique.

  6. #6
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 389
    Points : 10 422
    Points
    10 422
    Par défaut
    Pour une solution classique tu peux éventuellement regarder ici.

    La classe est facilement paramétrable et comprend de multiples options (renommage automatique, redimensionnement, téléchargement multiple etc.) ainsi que la gestion des erreurs. Dans plusieurs exemples d'utilisation, je fais aussi afficher un message "Patientez..." qui s'affiche durant le téléchargement, c'est moins perfectionné qu'une barre de progression mais cela rend bien service quand même.

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

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

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 460
    Points : 5 824
    Points
    5 824
    Billets dans le blog
    1
    Par défaut
    Merci pour cette classe que je garde de côté, mais je n'ai pas encore les "connaissances minimales requises" : c'est de la POO et je n'y connais rien ; je l'ai réalisé quand j'ai voulu passer de mysql_query à PDO. Donc je vais commencer par apprendre la POO, puis me remettrais à PDO et à ta classe.

  8. #8
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 389
    Points : 10 422
    Points
    10 422
    Par défaut
    Si si tu as les connaissances suffisantes car elle est conçue pour être utilisée sans connaissances préalables sur la POO. Il suffit de lire le mode d'emploi, et de suivre les exemples. Cela te fera juste comprendre comment instancier (ou déclarer) une classe avec le mot "new" et ensuite comment appeler les fonctions avec le "->". C'EST TOUT!

    En fait tout est pré configuré et tu n'as pas besoin de regarder le code interne (juste le mode d'emploi qui liste les fonctions utiles et explique leur paramètres).
    L'intérêt justement c'est qu'elle permet beaucoup de choses avec des connaissances vraiment minimales (même en php procédural).

    Par exemple tu peux déjà faire le minimum avec trois lignes

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    //On instancie, à l'aide du mot "new", la classe qui s'appelle "Telechargement" avec ses paramètres de configuration et on l'associe à $up (ou a $toto pourquoi pas)
    $up = new Telechargement('Documents','form1','doc');
     
    // On appelle maintenant selon ses besoins les fonctions prédéfinies (ici "Set_Renomme_fichier") à l'aide de  "->"
    $up->Set_Renomme_fichier('incr');
     
    // On termine la configuration et on réalise le téléchargement avec la fonction "Upload"
    $up->Upload();
    Voilà tout ce que tu as besoin de savoir sur le principe d'utilisation. On peut guère faire plus simple

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

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

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 460
    Points : 5 824
    Points
    5 824
    Billets dans le blog
    1
    Par défaut
    Bon, OK, donc dès que j'ai un moment, je regarde.

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

Discussions similaires

  1. Formulaire avec upload de vidéo
    Par achio350 dans le forum Langage
    Réponses: 1
    Dernier message: 07/12/2008, 19h43
  2. Formulaire avec upload
    Par sokebana dans le forum Langage
    Réponses: 3
    Dernier message: 19/11/2008, 23h12
  3. Réponses: 1
    Dernier message: 23/09/2008, 21h37
  4. formulaire avec upload
    Par Sheriff dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/12/2006, 08h51
  5. formulaire avec upload
    Par sami_c dans le forum ASP
    Réponses: 2
    Dernier message: 23/01/2006, 12h04

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