Php et upload

**gboul** · 01/07/2015, 22h06

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>

**gboul** · 01/07/2015, 22h12

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

**ABCIWEB** · 02/07/2015, 01h18

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.

**gboul** · 03/07/2015, 21h35

Envoyé par ABCIWEB

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>

**ABCIWEB** · 03/07/2015, 23h41

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.

**gboul** · 04/07/2015, 09h32

Envoyé par ABCIWEB

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.

Php et upload

AJAX

Vue hybride

Discussions similaires

Partager

Partager