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

AJAX Discussion :

Php et upload


Sujet :

AJAX

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 7
    Par défaut Php et upload
    Bonjour,
    Je me suis créé à chez un serveur web qui me permet de pouvoir à accès à mes fichiers lorsque je suis en déplacement.
    Ceci fonctionnait très bien, mais il était nécessaire de connaître le lien par coeur pour pouvoir avoir accès à ces fichiers.
    De ce fait, j'ai décidé de me faire un script de téléchargement afin de pouvoir récupérer un certain nombre d'informations et les entrer dans une base SQL lors du téléchargement du fichier, ce qui fonctionne très bien.
    Depuis peu, j'ai voulu mettre une barre d'avancement du téléchargement, car ça pouvait être assez long et je veux savoir où en est le téléchargement.
    Depuis, je n'arrive plus du tout à télécharger et même commencer le téléchargement. Pourriez-vous m'aider à identifier où se situe le problème?

    La première partie du script, qui est en PHP est la partie qui permet de mettre la barre d'avancement ainsi que le lancement d'un script secondaire (up-script.php) qui permettra de rentrer les données dans la base SQL.
    La seconde partie, qui est en HTML, permet de faire la mise en page de la page web, qui est rudimentaire, mais suffisante. Il s'agit d'une page qui affiche, le résumé du fichier qui est à rentrer, le fichier qu'il faut télécharger (grâce à un bouton "Parcourir"), la barre d'avancement du téléchargement, des coches qui permettent de déterminer le type de fichier et enfin, le bouton envoi (qui devrait lancer la fonction uploadFichier).
    Dans ce script, je récupère les valeurs des coches que j'ai mises, le nom du fichier et le fichier. Je mets tout ça dans le paramètre data et si aucun problème ne survient, je l'envoi au script up-script.php, qui est un fichier séparé dans le même répertoire.

    Mon problème est que lorsque j'appui sur le bouton envoyer, rien ne se passe et je n'arrive pas à comprendre pourquoi.

    Merci beaucoup pour votre aide et voici le script ci-dessous.


    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
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
     
    <title>Upload de fichier</title>
    <html lang="fr">
    <meta charset="UTF-8" />
    <script>
    //              long t0 = System.currentTimeMillis();
    var uploader = document.getElementById('uploader');
     
     
     
                    function _(elmt){
                            return document.getElementById(elmt);
                    }
     
                    function uploadFichier(){
                            var file = _('file').files[0];
                            var nom = _('nom');
                            var choix1 = _('choix1');
                            var choix2 = _('choix2');
                            var choix3 = _('choix3');
                            var choix4 = _('choix4');
                            var choix5 = _('choix5');
                            var choix6 = _('choix6');
                            var choix7 = _('choix7');
                            var choix8 = _('choix8');
                            var choix9 = _('choix9');
                            var choix10 = _('choix10');
                            var choix11 = _('choix11');
                           var choix12 = _('choix12');
     
                            var data = new FormData();
                            data.append('file', file, nom, choix1, choix2, choix3, choix4, choix5, choix6, choix7, choix8, choix9, choix10, choix11, choix12);
                            set_time_limit(0);
     
                            var ajax = new XMLHttpRequest();
                            ajax.upload.addEventListener("progress", progressHandler, false);
                            ajax.addEventListener("load", completeHandler, false);
                            ajax.addEventListener("error", errorHandler, false);
                            ajax.addEventListener("abort", abortHandler, false);
                            ajax.open("POST", "up-script.php");
                            ajax.send(data);
                    }
     
                    function progressHandler(event){
                            _('status_bytes').innerHTML = event.loaded + ' bytes uploadés sur ' + event.total;
                            var pourcentage = (event.loaded / event.total) * 100;
                            _('progressBar').value = Math.round(pourcentage);
                            _('status').innerHTML = Math.round(pourcentage) + '% uploadé - Patientez...';
                    }
                    function completeHandler(event){
                            _('status').innerHTML = event.target.responseText;
                            _('progressBar').value = 0;
                    }
                    function errorHandler(){
                             _('status').innerHTML = "L'upload a échoué!";
                    }
                    function abortHandler(){
                            _('status').innerHTML = "L'upload a ´té annulé!";
                    }
     
            </script>
     
     
    <body>
    <form name="formulaire" method="post" enctype="multipart/form-data">
    <p style="text-align: center;">Upload d'un fichier</p>
    <p style="text-align: center;"> </p>
    <p style="text-align: center;"><!-- Le contenu du formulaire est Ã*lacer ici... --></p>
    <p style="text-align: center;"><!-- Ajouter le nom du fichier --></p>
    <p style="text-align: center;">Résumé du contenu (pas du fichier) <input name="nom" size="50" type="textbox" /></p>
    <p style="text-align: center;"><!-- Permet de séctionner un fichier --></p>
    <p style="text-align: center;">Séléctionnez votre fichier <input name="file" type="file" id="file" /></p>
    <p style="text-align: center;">
    <progress id="progressBar" value="0" max="100"></progress>
    </p>
     
    <style="text-align: center;">
            <h2 id="status"></h2></p>
    <style="text-align: center;">
            <p id="status_bytes"></p>
    <style="text-align: center;">
            <p id="status_speed"></p>
     
    <p style="text-align: center;"><input name="MAX_FILE_SIZE" type="hidden" value="1500000000" /></p>
    <p style="text-align: center;">Séléctionner le type de fichiers</p>
    <p style="text-align: center;"><input name="choix1" type="checkbox" /> .doc <input name="choix2" type="checkbox" /> .docx <input name="choix3" type="checkbox" /> .xls</p>
    <p style="text-align: center;"><input name="choix4" type="checkbox" /> .xlsx <input name="choix5" type="checkbox" /> .ppt <input name="choix6" type="checkbox" /> .pptx</p>
    <p style="text-align: center;"><input name="choix7" type="checkbox" /> .pps <input name="choix8" type="checkbox" /> .ppsx <input name="choix9" type="checkbox" /> CAD</p>
    <p style="text-align: center;"><input name="choix10" type="checkbox" /> Outlook(.sdb) <input name="choix11" type="checkbox" /> Outlook(.mdb) <input name="choix12" type="checkbox" /> .zip  </p>
    <p style="text-align: center;"><!-- Bouton Envoyer --></p>
    <p style="text-align: center;"><input name="envoyer" type="button" value="Envoyer le fichier" onclick="uploadFichier()"/></p>
    </form>
    </p>
    </body>
    </html>

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 7
    Par défaut
    En réécrivant le script et en vérifiant régulièrement le bon fonctionnement, j'ai trouvé que le problème arrivait lorsque je tentais de mettre la valeur des checkbox dans des paramètres, comme indiqué dans le code ci-après.
    Du coup, ma question devient, Est-ce que quelqu'un saurait comment récupérer les valeurs du formulaire précédemment créé? J'ai cherché, mais pour le moment, je n'ai rien trouvé qui fonctionne.

    Merci pour votre aide.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
                            var nom = _('nom');
                            var choix1 = _('choix1');
                            var choix2 = _('choix2');
                            var choix3 = _('choix3');
                            var choix4 = _('choix4');
                            var choix5 = _('choix5');
                            var choix6 = _('choix6');
                            var choix7 = _('choix7');
                            var choix8 = _('choix8');
                            var choix9 = _('choix9');
                            var choix10 = _('choix10');
                            var choix11 = _('choix11');
                            var choix12 = _('choix12');

  3. #3
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 417
    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 417
    Par défaut
    Et maintenant ça coince à quel moment, en javascript avant l'envoi du formulaire, ou côté serveur php pour récupérer ces variables ?
    Normalement il faut utiliser encodeURIComponent() pour passer tes variables et urldecode() côté php.

    Si besoin tu peux utiliser cette solution d'upload. Elle a toutes les fonctionnalités que tu veux - même beaucoup plus (affichage du temps restant et de nombreux autres informations en temps réel en option) et elle est particulièrement intéressante pour les gros fichiers car tu peux faire des reprises d'upload en cas d'interruption du téléchargement en utilisant la partie du fichier automatiquement sauvegardée durant l'upload - et il y a des exemples prêts à l'emploi. Tu pourras ajouter tous les champs que tu veux dans le formulaire et ils seront transmis automatiquement côté php sans besoin de modifier le code javascript. Juste côté php il faut utiliser la fonction urldecode() pour récupérer tes variables.

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 7
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Et maintenant ça coince à quel moment, en javascript avant l'envoi du formulaire, ou côté serveur php pour récupérer ces variables ?
    Merci pour le message précédent, mais c'est un peut compliqué et je suis en train de l'étudier.
    Cependant, j'ai découvert où mon script pose problème. C'est lors de la récupération des valeurs des checkbox. Et là, j'ai deux problèmes.

    La première, c'est lors de l'affectation des valeurs au paramètre "data". J'ai tenté de l'affecter à la variable en une seule fois, mais il semblerait qu'il faille le faire valeur par valeur. J'ai donc séparé la ligne ci-dessous en plusieurs lignes.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    data.append('file', file, nom, choix1, choix2, choix3, choix4, choix5, choix6, choix7, choix8, choix9, choix10, choix11, choix12);
    Cependant, comme ça ne fonctionne pas, j'ai trouvé une autre solution possible qui me pose malgré tout problème.
    J'ai utilisé la fonction foreach qui me permet de balayer les valeurs des checkbox dont j'ai changé le nom, comme indiqué dans le script ci-après.
    Cependant, la fonction foreach n'existe pas en ajax (je ne sais pas si ça se dit, mais je pense que c'est compréhensible).
    De ce fait, j'ai utilisé la fonction $.each, par contre, mon problème est que je n'ai pas trouvé la façon de l'écrire pour qu'il s'adapte à mon script.
    Donc si quelqu'un connaît la typographie de la fonciton $.each, je suis preneur.

    Merci.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    foreach($_POST['choix'] as $valeur){
    data.append('choix[]', $valeur);
    }
     
    [...]
     
    <p style="text-align: center;"><input name="choix[]" value="choix1" type="checkbox" /> .doc <input name="choix[]" value="choix2" type="checkbox" /> .docx <input name="choix[]" value="choix3" type="checkbox" /> .xls</p>
    <p style="text-align: center;"><input name="choix[]" value="choix4" type="checkbox" /> .xlsx <input name="choix[]" value="choix5" type="checkbox" /> .ppt <input name="choix[]" value="choix6" type="checkbox" /> .pptx</p>
    <p style="text-align: center;"><input name="choix[]" value="choix7" type="checkbox" /> .pps <input name="choix[]" value="choix8" type="checkbox" /> .ppsx <input name="choix[]" value="choix9" type="checkbox" /> CAD</p>
    <p style="text-align: center;"><input name="choix[]" value="choix10" type="checkbox" /> Outlook(.sdb) <input name="choix[]" value="choix11" type="checkbox" /> Outlook(.mdb) <input name="choix[]" value="choix12" type="checkbox" /> .zip  </p>

  5. #5
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 417
    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 417
    Par défaut
    Tu peux utiliser par exemple document.getElementsByName pour cibler tes inputs.
    Cela dit cette question montre que tu es novice en javascript. C'est pas un problème on est tous passés par là, mais faudrait faire plus tutos avant de coder ce genre de choses sinon tu risques de galérer un moment avant de tout faire fonctionner correctement. C'est pour cela que je t'ai proposer une solution toute prête dans mon précédent message, tout est déjà fonctionnel et tu n'aurais pas besoin de toucher au code javascript pour pouvoir ajouter tous les champs que tu veux dans ton formulaire.

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 7
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Cela dit cette question montre que tu es novice en javascript.
    Oui, effectivement, je suis novice en javascript. J'ai fait des tutos, mais ceux que j'ai fait ne m'ont pas appris grand chose et du coup au bout d'un moment je m'impatiente et je passe à autre chose. Et si je commence un tuto, je veux le faire en entier, de peur d'oublier quelque chose. Je sais, c'est un peut contradictoire de vouloir tout faire et de passer à autre chose rapidement. Mais bon...
    Le truc c'est que j'ai une idée en tête et j'ai envie de la mettre rapidement en œuvre, tout en apprenant. Ce qui est gênant, avec la solution que tu m'a donné en premier, c'est que c'est déjà tout fait et du coup, je risque de ne rien apprendre... ou moins que si je l'ai fait par moi même, car comme on dit, c'est en faisant les erreurs qu'on apprend.

    En tout cas, merci.

  7. #7
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 417
    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 417
    Par défaut
    Salut,

    C'est tout à ton honneur de vouloir apprendre. Mais dans tout apprentissage il y a une progressivité à respecter, des marches à monter les unes après les autres. Je dis simplement que ce que tu veux faire n'est pas un exercice pour les débutants. En forçant le pas tu risque de coller des bouts de code ici et là sans tout comprendre, ce qui n'est pas un bon moyen d'apprendre, pour au final avoir un code plus ou moins fonctionnel qu'il te sera très difficile voire impossible d'améliorer sans tout casser. Si on peut se permette cette approche pour de petites fonctionnalités, ce n'est pas le cas ici.

    Et donc tu vas devoir fournir un gros travail d'apprentissage avant de t'attaquer à ce travail, sinon il ne te seras pas profitable, tu ne pourras pas aller vite et bien sur ce coup là.

    Soit tu as beaucoup de temps devant toi et tu peux t'y mettre en commençant par les sélecteurs en javascript - je t'ai donné un lien plus haut, qui indique aussi comment lister le tableau récupéré par la sélection - soit tu veux aller vite et avoir rapidement un résultat opérationnel et dans ce cas je te conseille plutôt d'utiliser une solution toute faite. Cela te permettrait de parfaire tranquillement tes notions en javascript avant de t'attaquer à des plus gros travaux.

    Au passage on apprend pas rien en se servant d'un code tout fait, car pour le personnaliser il faut comprendre le principe de fonctionnement, l'utilisation des méthodes proposées, cela permet de comprendre au passage le principe des API. Et puis la solution que je te propose possède aussi une version _DEV, avec un code ouvert et commenté donc tu peux t'y référer si tu veux comprendre ce qui a été fait.

    Je te souhaite bon courage pour la suite car javascript n'est pas le langage le plus facile à appréhender

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2010
    Messages : 7
    Par défaut
    Merci beaucoup pour ton aide.

Discussions similaires

  1. Code erreur dans un script PHP d'upload
    Par la_saucisse dans le forum Free
    Réponses: 0
    Dernier message: 10/09/2009, 00h22
  2. Réponses: 5
    Dernier message: 30/11/2008, 00h17
  3. [MySQL] php et upload
    Par nitteN dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 18/07/2008, 01h48
  4. [PHP-JS] Upload de fichier en passant par JAVASCRIPT + PHP
    Par polothentik dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 06/05/2008, 08h52
  5. [Upload] formulaire php avec upload de fichier
    Par achos dans le forum Langage
    Réponses: 5
    Dernier message: 15/10/2007, 14h14

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