Retour de réponse avant l'upload

Version imprimable

Bonjour,

Je modifie un petit script d'upload de fichier, dont j'inclus des vérifications avant de procéder à l'upload, je trouvais une difficulté de vérifier si l'utilisateur est connecté ou non, autrement dit: je me connecte, je reçois un coup de fil, je suis au téléphone pour une dizaine de minute, après je reviens pour uploader un fichier, comment vérifier que cet utilisateur n'est pas déconnecté (déconnexion automatique, session expirée) avant de procéder à l'upload du fichier:

Code:

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
$(document).ready(function(){
 
   /*
    * Code ici 
	*/
    $(document).on('change', '.upMedia', function() {
 
       /*
	    * 
		* */
 
        $.ajax({
            type: "POST",
            url: "handleUploads.php",
            data: formdata,
            dataType: "json",
            contentType: false,
            processData: false,
 
            beforeSend: function(data) {
 
 
            },
 
           xhr: function(data) {
               console.log(data);
 
 
               var xhr  = new XMLHttpRequest();
 
            //console.log(xhr);
            return xhr;
 
        },
 
 
        complete: function(data) {
		/*
		 * 
		 */
 
 
        },
	error:function(){
    // failed request; give feedback to user
	alert('there is an error');
  }
 
 
        }); // end ajax
 
 
        return false;
    }); // end change

Merci a vous

29/03/2018, 13h50
mathieu

la connexion est côté serveur, donc c'est plutôt en PHP dans handleUploads.php que vous allez vérifier la session.
et ensuite cet URL envoie un message suivant que l'upload a bien été réalisé ou non.

Effectivement que se fera du côté handleUploads.php, je reçois la réponse apres quelques évenements, par exemple "Progress bar en marche" alors que je recois une erreur, j'aimerais bien recevoir une reponse avant le commencement du xhr:

Code:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
xhr: function(data) {
 
 
               var xhr  = new XMLHttpRequest();
 
                xhr.upload.addEventListener('progress', function(ev) {
                console.log(ev);
 
 
                var targetPercent   = mediaType+'-ProgressBarPercent-'+incInputs;
                console.log(targetPercent);
                var targetCount     = mediaType+'-ProgressBarCount-'+incInputs;
                console.log(targetCount);
                var targetWrap      = mediaType+'-ProgressBarWrap-'+incInputs;
                console.log(targetWrap);
                var targetMsg      = mediaType+'-MsgDisplay-'+incInputs;
                console.log(targetMsg);
                var targetCancel    = mediaType+'-ProgressBarCancel-'+incInputs;
                console.log(targetCancel);
 
 
                    if(mediaType == 'img'){
                        allowedExt   = allowedImgExt;
                        allowedSize   = allowedImgSize;
 
                    } else {
                        allowedExt   = allowedVidExt;
                        allowedSize   = allowedVidSize;
                    }
 
 
 
                    var uploadFile = checkFiles(fileID, mediaTypeID, allowedExt, suspExt, allowedSize);
 
                var extractFileInfo     = uploadFile[2];
 
                // get file information
                //var fileName            = extractFileInfo[0];
                var fileSize            = extractFileInfo[1];
 
 
                // get timestamp
                var getStamp    = ev.timeStamp;
                console.log(getStamp);
 
 
                var lComput     = ev.lengthComputable;
                //console.log('comput '+lComput);
 
                var total       = ev.total;
                //console.log(total);
                var loaded      = ev.loaded;
 
                var ratio       = Math.floor(ev.loaded/(ev.total/100));
                var percentage  = ratio+'%';
 
                console.log(percentage);
 
                var classToAdd      = '';            
                var classToRemove   = '';
                var msgDisplay      = '';
                var showSize        = '';
 
 
                switch(true){
                    case (ratio < 40):
                        classToRemove   = 'progress-bar-custom';
                        classToAdd      = 'progress-bar-danger';
                        msgDisplay      = 'Uploading...';
                        showSize        = 'Yes';
                    break;
 
                    case (ratio >= 40 && ratio < 60):
                        classToRemove   = 'progress-bar-danger';
                        classToAdd      = 'progress-bar-warning';
                        msgDisplay      = 'Uploading...';
                        showSize        = 'Yes';
                    break;
 
                    case (ratio >= 60 && ratio < 80):
                        classToRemove   = 'progress-bar-warning';
                        classToAdd      = 'progress-bar-info';
                        msgDisplay      = 'Uploading...';
                        showSize        = 'Yes';
                    break;
 
                    case (ratio >= 80 && ratio < 99):
                        classToRemove   = 'progress-bar-info';
                        classToAdd      = 'progress-bar-primary';
                        msgDisplay      = 'Uploading...';
                        showSize        = 'Yes';
                    break;
 
 
                    case (ratio >= 99 && ratio < 100):
                        classToRemove   = 'progress-bar-primary';
                        classToAdd      = 'progress-bar-success';
                        msgDisplay      = 'Scanning in Process...';
                        showSize        = 'No';
                    break;
 
                    case (ratio == 100):
                        classToRemove   = 'progress-bar-primary';
                        classToAdd      = 'progress-bar-success';
                        msgDisplay      = 'Scanning in Process...';
                        showSize        = 'No';
                    break;
 
                } // end switch
 
 
                var sizeUploaded = formatBytes(loaded)+' of '+formatBytes(fileSize)+' ';
 
                if(showSize == 'Yes'){
                    msgDisplay  = msgDisplay+' <br> '+sizeUploaded;
                } else {
                    msgDisplay  = msgDisplay;
                }
 
                console.log(targetPercent +' : add '+classToAdd);
                console.log(targetPercent +' : del '+classToRemove);
 
                $('#'+targetPercent).html(percentage).show();
                //$('.progressBar').html(formatBytes(loaded)+' of '+formatBytes(fileSize)+' '+percentage).show();
                //$('#'+targetCount).html(loaded+' KB of '+fileSize+' KB ').show();
 
                //$('.alert').css('display', 'block')
 
                $('#'+targetPercent).removeClass(classToRemove).addClass(classToAdd);
                $('#'+targetPercent).css({
                                            'width': percentage,
                                            'color': '#ffffff',
                                            'font-weight': 'bold'
                                        });
 
                $('#'+targetMsg).html(msgDisplay);
 
                var getClasses = $('.progress-bar').attr('class');
                console.log('classes '+getClasses);
 
                /*
                $('#'+targetWrap).css({
                        "background-color": background, 
                        "width": percentage
                    });
                    */
 
            //$('#progressBar').css('width', (ev.loaded/(ev.total/100))+'%');
                //console.log((ev.loaded/(ev.total/100)));
            }, false);
 
            //console.log(xhr);
            return xhr;
 
        },

29/03/2018, 16h22
mathieu

Citation:

Envoyé par Fredy007

j'aimerais bien recevoir une reponse avant le commencement du xhr:

c'est pour économiser le temps d'attente pendant l'upload sur le serveur avant que le début du code PHP soit lancé ?

si c'est pour ça, vous pouvez faire un autre script PHP qui teste uniquement la connexion. et dans le code JavaScript vous faites un appel AJAX à ce script avant de lancer l'upload.
29/03/2018, 22h50
Fredy007
Donc je vérifie avec un autre code si l'utilisateur est connecté, sinon j'affiche le message d'erreur:
Code:

1 2 3 4 5 6 7 8 if($_SESSION['username]){ // afficher le code pour l'upload } else { echo 'vous êtes déconnectés'; }
EDIT:

J'ai mis un code qui lance une requete chaque minute au serveur, et verifie si l'utilisateur est connecté ou non, sinon, un retour message s'affiche sur son ecran
30/03/2018, 00h26
ABCIWEB

Heu non, là ça t'avance à rien, c'est pas déjà cette même condition que tu mets dans tes scripts d'upload côté serveur ?

Si c'est pour éviter au visiteur d'avoir à attendre de télécharger un fichier avant d'avoir la réponse qu'il est déconnecté, il faut faire une requête qui va vite (donc sans upload) dans cette première requête. Et en fonction du résultat tu lance l'upload, c'est ce principe qu'avait donné mathieu
30/03/2018, 01h34
Fredy007

J'ai edité mon message ci-dessus
30/03/2018, 08h29
ProgElecT

Salut

if($_SESSION['username]){ :nono:
if($_SESSION['username']){:ccool:
30/03/2018, 12h09
Fredy007

Effectivement ProElect, je pars du principe :)
31/03/2018, 14h47
ABCIWEB

Citation:

Envoyé par Fredy007

J'ai mis un code qui lance une requete chaque minute au serveur, et verifie si l'utilisateur est connecté ou non, sinon, un retour message s'affiche sur son ecran

Tu peux espacer beaucoup plus si tu veux économiser des requêtes serveur inutiles. Chaque requête réinitialise le décompte de la durée de la session de sorte qu'il te suffit de faire une requête ajax à une fréquence inférieure à la durée de la session.
Par défaut les sessions sont limitées à 1440 secondes (c'est la config : session.gc_maxlifetime) soit 24 minutes donc faire une requête toutes les 20 minutes environ devrait être suffisant.