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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
| <?php
/*
Utilise le fichier "Php_Upload/UploadAjaxABCI_Upload_Traitements_Images2.php" comme destination Ajax,
et la variable de session $_SESSION['upload_location_href'] pour définir la redirection.
*/
session_start();
header('Content-type: text/html; charset=UTF-8');// Inutile depuis php 5.6
// Charge les classes php avec spl_autoload_register
spl_autoload_register(function ($class) {require 'Php_Upload/Classes/' . $class . '.php';});
$up = new UploadABCIServices();
$UpAbci_fragmentSize = $up->returnOctets('8M');
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = min($up->returnOctets(ini_get('upload_max_filesize')), $up->returnOctets(ini_get('post_max_size')));
$UpAbci_fragmentSize = !empty($UpAbci_fragmentSize) && $upload_max_filesize > $UpAbci_fragmentSize ? $UpAbci_fragmentSize : $upload_max_filesize;
$UpAbci_uniqidForm = $up->getUniqid();
// Jeton de formulaire (token);
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
// Extensions autorisées. Le script ci-dessous permet de centraliser les extensions autorisées ici pour l'ensemble du processus d'upload, en php et javascript
$ext_ok = ['.jpg','.jpeg','.png','.gif'];
//Je crée une chaine de caractères en ajoutant une virgule pour l'attribut "accept" du champ de type file
$accept = implode(",",$ext_ok);
// je supprime les "." pour un affichage dans la balise "legend" du formulaire
$tab_legend = $up->cleanTabExtensions($ext_ok);
// Et je crée une chaine de caractères en rajoutant une virgule et un espace
$legend = implode(", ",$tab_legend);
$legend = 'fichiers: '.$legend;
/*
J'enregistre les extensions autorisées dans une variable de session pour les passer au script d'upload et j'utilise
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm] pour préserver l'espace de nom des variables de session
*/
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['ext_ok']= $ext_ok;
// Optionnel: fonction de nettoyage du dossier temporaire (cf mode d'emploi rubrique "Mise en production, notes" ->Technique d'upload, maintenance).
NettoyageTemp::interval();
// Si $_SESSION['location_href'] n'est pas définie la redirection se fera vers la page d'index.
$location_href = isset($_SESSION['upload_location_href'])? $_SESSION['upload_location_href'] : 'https://www.uavh.fr/';
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Traitement d'images - Upload Ajax ABCIWEB</title>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:0.9em;
max-width:700px;
line-height:1.8em;
margin:0;
padding:0;
/*marge gauche qui s'affichera par rapport au div conteneur de l'iframe*/
margin-left:0em;
}
p {
padding:0;
margin:0;
}
.UpAbci_infosFile {
word-wrap:break-word;
}
.UpAbci_infosFile progress {
width:100px;
}
</style>
</head>
<body>
<div id="content_form">
<form id="form_redim" action="#" method="post">
<fieldset style="border:3px solid #B9B9B9;border-radius:5px;padding:.8em">
<legend>Upload <?=$legend?></legend>
<input type="file" name="upload" multiple="multiple" accept="<?=$accept?>" style="display:none">
<input type="hidden" name="UpAbci_fragmentSize" value="<?=$UpAbci_fragmentSize?>">
<input type="hidden" name="UpAbci_uniqidForm" value="<?=$UpAbci_uniqidForm?>">
<p id="select_file" style="font-size:15px;letter-spacing:.08em;padding:1em 0.3em;background:#eee;color:#000;text-align:center;cursor:pointer;border-radius:3px">Sélectionnez ou déposez vos fichiers ici</p>
<!-- Bloc conteneur du retour d'informations -->
<div id="reponse_upload">
<!--information du fichier que l'on affiche uniquement si un fichier est sélectionné, pour éviter la barre de progression graphique vide si soumission
du formulaire sans fichier-->
<div class="UpAbci_infosFile" style="display:none;margin-top:1em;clear:both;" data-upabcicss-select-file="display:block;">
<hr>
<div>
<p class="UpAbci_imgPreview" style="float:right"></p><!-- vignettes si le poids total ne dépasse pas la config javascript définie plus bas à 100Mo -->
<p>
<span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.8em;" data-upabcicss-result="cursor:default;opacity:0.5;color:#666">stop </span>
<span class="UpAbci_name"></span><!-- nom du fichier -->
<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
<!-- status (important sinon pas de retour d'information en cas d'erreur) -->
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold" data-upabcicss-result-error="color:red">en attente</span>
</p>
<p class="photo_exif"></p>
</div>
<!-- S'affichera si une sauvegarde existe en cas d'arrêt ou d'erreur si le fichier a été traité par le serveur -->
<p style="display:none;" data-upabcicss-result-partial="display:block">- sauvegardé : <span class="UpAbci_backup">0 Mo</span></p>
</div>
</div>
<!-- Bloc conteneur retour d'informations du contrôle javascript. J'utilise les styles événementiels data-upabcicss-select-file et data-upabcicss-submit
pour supprimer cet affichage à la sélection des fichiers et à la soumission du formulaire -->
<p class="erreurs_form" style="display:none;border:2px solid red;border-radius:5px;color:red;padding:0.5em;margin-top:1.5em;clear:both" data-upabcicss-select-file="display:none" data-upabcicss-submit="display:none"></p>
</fieldset>
<!-- Bloc conteneur retour d'informations générales du serveur. J'utilise le style événementiel "data-upabcicss-select-file" pour le cacher dès la sélection
de nouveaux fichiers. Il sera affiché si nécessaire dans la méthode événementielle func_FormEnd -->
<div class="UpAbci_infosServer" style="display:none;border:2px solid red;border-radius:5px;padding:0.5em;margin-top:.5em;clear:both" data-upabcicss-submit="display:none" data-upabcicss-select-file="display:none"></div>
<p class="submit_file" style="text-align:center;display:none" data-upabcicss-select-file="display:block" data-upabcicss-form-end="display:none"><input type="submit" style="display:inline-block;font-size:18px;letter-spacing:.08em;width:100%;margin:.5em auto .5em auto;padding:0.3em;background: #093;color:#fff;text-align:center;cursor:pointer;border-radius:3px" value="Charger vos fichiers"></p>
</form>
<!-- span contenant l'adresse de redirection. Sera récupérée par javascript (c'est plus propre que d'écrire du php dans le code javascript et permettrait également d'externaliser le code javascipt)-->
<span id="location_href" style="display:none"><?=htmlspecialchars($location_href)?></span>
</div>
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script>
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode.
// Initialisation de la classe javascript (destination ajax, identifiant formulaire, identifiant réponse)
$(function(){
// Destination ajax de l'upload
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Upload_Traitements_Images2.php';
// Redirection renseignée dans le span ayant l'id "location_relaod"
var location_href = $('#location_href').text();
// Définition d'un objet jQuery correspondant au formulaire
var form = $('#form_redim');
// Définition d'un objet jQuery correspondant au conteneur du formulaire
var content_form = $("#content_form");
//Initialisation de la classe javascript
var up = new UploadAjaxABCI(destination_ajax, form, '#reponse_upload');
// Extensions autorisées, récupère le contenu de l'attribut accept du champ de type file et construit un tableau
var file_form = form.find('input[type=file]');
up.config.filesExtensions = file_form.attr('accept') != undefined ? file_form.attr('accept').split(',') : [];;
// S'affichera si le redimensionnement et l'upload sont ok.
up.info.status.ok = "OK";
// Message d'erreur si problème serveur. Sera complété par le message renvoyé par le serveur pour plus de précision.
up.info.status.errorServer = "Echec du traitement. ";
up.config.imgPreviewMaxWidth = 100; // en pixels, largeur maximale de l'aperçu
up.config.imgPreviewMaxHeight = 100;// en pixels, hauteur maximale de l'aperçu
// Bouton de sélection personnalisé
up.config.customFileSelect = '#select_file';
// Etant donné que le formulaire n'evoie que des fichiers, on interdit sa soumission si aucun fichier n'est sélectionné
up.config.submitWithoutFile = false;
// Durant la soumission du formulaire on formate le bloc "Charger les fichiers" avec une faible opacité
up.config.cssSubmitOn = "opacity:.5";
// Création d'une fonction pour définir la hauteur de l'iframe et de son conteneur
function setDimIframe () {
// Cible l'iframe et son conteneur
var iframe = $(window.parent.document.getElementById("iframe_upoad"));
var div_content = iframe.parent();
if (iframe.length && div_content.length && content_form.length){
var fh = content_form.height();
div_content.css("height",fh);
iframe.css("height",fh);
}
}
// Création d'une fonction pour créer la redirection de la fenêtre parente (si pas de parent iframe on fait la redirection dans la même page).
function redirection(){
window.parent.document.location.href = location_href;
}
/*
Cette fonction (qui est déclenchée onchange sur le sélecteur de fichiers) permet de redimensionner l'iframe si le visiteur a précédemment fait une sélection
de fichiers puis en refait une seconde et qu'il annule sa sélection depuis la boite de sélection des fichiers proposée par le système d'exploitation.
Dans ce cas, Chrome et Edge suppriment le contenu de la sélection précédente, il faut donc redimensionner de contenu de l'iframe,
sinon cela ferait un trou par rapport au bloc html suivant le formulaire d'upload.
*/
up.config.func_FileSelectAllBefore = function(event,tableau)
{
setTimeout(setDimIframe,200);
}
// On redimensionne l'iframe pour chaque image de prévisualisation chargée
up.config.func_ImgPreviewLoadEach = function(image, obj)
{
setDimIframe();
}
/* Définition d'une méthode javascript événementielle "config.func_FileSelectAll" qui sera exécutée à la sélection des fichiers.
On redimensionne l'iframe au cas où certaines images seraient corrompues, ou que l'on charge des fichiers qui ne sont pas des images.
*/
up.config.func_FileSelectAll = function(event,tableau)
{
setDimIframe();
}
/* Définition d'une méthode javascript événementielle "config.func_FileEndEach" qui sera exécutée à la fin du traitement de chaque fichier.
Au cas où la réponse du serveur renvoie du texte qui modifierait la hauteur du formulaire, on redimensionne l'iframe
*/
up.config.func_FileEndEach = function(tableau, info_server)
{
setDimIframe();
}
// Définition d'une méthode javascript événementielle qui sera exécutée à la fin du traitement du formulaire (option ".config.func_FormEnd")
up.config.func_FormEnd = function(tableau, info_server)
{
/* Si info_server est renseigné dans la fonction de callback "config.func_FormEnd", c'est qu'un message est retourné depuis le serveur, voir "addInfosServer" côté serveur suite
au contrôle des dossiers et du tableau des extensions autorisées. "info_server" peut aussi être renseeignée en interne par la classe d'upload en cas de dysfonctionnement.
Cette information est retournée automatiquement dans le bloc html ayant la classe "UpAbci_infosServer".
Mais dans le html ce bloc est caché par défaut, je devrai donc le faire afficher en cas de besoin.
*/
/* J'afficherai également un message dans ce bloc si il y a eu un problème serveur ou lors des redimensionnemnts pour que le visiteur
ait le temps de voir les messages dans les informations spécifiques aux fichiers avant la redirection, tout en proposant un lien pour voir les fichiers traités.
*/
/*
Les fichiers ayant une propriété "result" DIFFERENTE de '0_0' on tous été traités par le serveur quelque soit le résultat final. Pour trouver le nombre de fichiers
en echec côté serveur on pourra donc faire : traités - ok. Cela permet d'exclure les fichiers arrêtés volontairemeent par l'utilisateur ou non soumis par
javascript pour erreur d'extension ou dépassement de taille autorisée (si l'on a configuré ces options) et dont l'information a déjà été affichée dans
le retour d'information spécifique aux fichiers avant la soumission du formulaire.
Voir le mode d'emploi "Configuration serveur ->Récupération des paramètres prédéfinis de la requête Ajax" pour comprendre le contenu des tableaux.
*/
var ok = 0, traite = 0;
$.each(tableau, function(i,v)
{
if(v.result == 'ok_done'){
ok++;
}
if(v.result != '0_0'){
traite++;
}
})
var bloc_info_server = form.find(".UpAbci_infosServer");
/* Si des fichiers on été en erreur lors de leur traitement côté serveur, on informe le visiteur pour qu'il consulte le résultat et l'on ajoute un lien pour
observer le résultat des fichiers ok. Sinon on renvoie directement vers les fichiers ok.
*/
if (traite > ok)
{
// Message d'information
var message = '<p>Certains fichiers n\'ont pas été traités. Voir les informations dans la liste des fichiers.</p>';
/* Si info_server est renseigné j'utilise la méthode append pour ne pas l'effacer et afficher "message" à la suite,
sinon la méthode html pour effacer les erreurs des éventuels upload précédents. */
info_server ? bloc_info_server.append(message) : bloc_info_server.html(message);
// Si certains sont ok on ajoute un lien
if (ok > 0) {
bloc_info_server.append('<p class="redirection" style="text-decoration:underline;cursor:pointer">Voir les fichiers traités</p>');
bloc_info_server.find(".redirection").on("click",function(){
redirection();
})
}
}
// Si erreur de tous ou certains fichiers ou erreur de dossier côté serveur on affiche le bloc et on redéfini la hauteur de l'iframe
if(traite > ok || info_server)
{
// Je fais afficher le bloc avec un slide et j'ajuste la hauteur de l'iframe
bloc_info_server.slideDown(10, 'linear', function(){
setDimIframe();
});
}
else
{
// Si pas d'erreur on fait la redirection de la page incluant l'iframe.
redirection();
// Si ce n'était pas une redirection il faudrait appliquer setDimIframe() dans cette condition, cf. note ci-dessous.
}
/*A noter que le bloc de chargement des fichiers (submit) s'efface dès la fin du téléchargement (cf. stlyle évènementiel "data-upabcicss-form-end="display:none"
situé dans son html) ce qui modifie donc la hauteur de l'iframe.
Dans d'autres contextes il faudrait donc appliquer "setDimIframe()" pour redimensionner l'ifrrame. Mais ici, soit on a un retour serveur qui renvoie des erreurs
et setDimIframe() est utilisé dès son affichage, et si pas d'erreur on est directment redirigé avec "redirection()" donc pas la peine de redimensionner l'iframe.
*/
}
// Démarrage DOM chargé
up.Start();
});
</script>
</body>
</html> |
Répondre avec citation
Envoyé par marcouni
Partager