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
| <?php
session_start();
header('Content-type: text/html; charset=UTF-8'); // Inutile depuis php 5.6
require 'Php_Upload/Classes/UploadABCIServices.php';
$up = new UploadABCIServices();
// J'ai passé $UpAbci_fragmentSize à 25M car des petites valeurs ralentissent l'upload des très gros fichiers avec de nombreuses requêtes (donc la sauvegarde temporaire se fera tous les 25Mo). Si le serveur ne supporte pas cette valeur, on corrige avec les lignes suivantes.
$UpAbci_fragmentSize = $up->returnOctets('25M');
// Vérifie si $UpAbci_fragmentSize n'est pas supérieur aux limites du serveur
$upload_max_filesize = $up->returnOctets(min(ini_get('upload_max_filesize'),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
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm]['token'] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Progressif Upload Ajax ABCIWEB</title>
<link rel="icon" type="image/png" href="Javascript/Images/favicon.png" />
<style type="text/css">
html {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.9em;
}
.formajaxabci input[type=submit] {
width:100px;
font-size:1.2em;
}
.formajaxabci p, .reponse_form p {
margin:0;
padding:0;
}
.UpAbci_infosFile {
word-wrap:break-word;
}
.UpAbci_infosFile progress {
width:100px;
}
</style>
</head>
<body>
<form class="formajaxabci" id="form_files1" action="#" method="post">
<fieldset style="color:#900;border:2px solid #900;border-radius:5px;padding:1em">
<legend>limité aux extensions avi, divx, mp4, mkv, mpg, jpg, jpeg, png, gif pour la Source et jpg, jpeg, png, gif pour la Vignette</legend>
<input type="file" name="source" style="display:none" />
<input type="file" name="vignette" style="display:none" />
<input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
<input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
<input type = "text" name="titre" placeholder="Titre">
<!-- les boutons personnalisés ci-dessous remplaceront les boutons d'upload standards des champs de type file grâce à l'option de configuration "config.customFileSelect" déclarée en javascript plus bas -->
<input type = "button" value='Charger la source' class="bouton_fichiers" style="background-color:#FC0;border-radius:7px;height:2.5em;font-size:1.2em;cursor:pointer" />
<input type = "button" value='Charger la vignette' class="bouton_fichiers" style="background-color:#FC0;border-radius:7px;height:2.5em;font-size:1.2em;cursor:pointer" />
<input type="submit" value="Envoyer" style="color:#900;height:2.5em;border-radius:7px;cursor:pointer" />
</fieldset>
</form>
<!-- bloc conteneur des informations -->
<div class="reponse_form" id="reponse_upload1" style="display:none;border-bottom:2px solid #900;padding:1em;" data-upabcicss-select-file="display:block" data-upabcicss-submit="display:block">
<!-- retour d'informations générales du formulaire alimenté par les contrôles javascript et par le retour ajax. -->
<div class="UpAbci_infosServer" style="display:none;color:#900;font-size:large;margin-bottom:1em;margin-top:0.5em" data-upabcicss-infos-server="display:block"></div>
<!-- bloc conteneur d'informations d'un fichier (sera dupliqué par la classe si upload multiple). -->
<div class="UpAbci_infosFile" style="margin-top:10px;display:none" data-upabcicss-select-file="display:block">
<!-- lien arrêt, affiché en transparence 0.5 si résultat (= upload terminé) Si tous les fichiers sont indispensables il ne sert à rien de proposer un arrêt individuel -->
<!-- <span style="cursor:pointer;color:#900" class="UpAbci_stop" data-upabcicss-result="cursor:default;opacity:0.5">arrêt</span> -->
<!-- nom du fichier -->
<span class="UpAbci_name"></span>
<!-- taille du fichier -->
<span class="UpAbci_size">0 Mo</span>
<!-- progression graphique -->
<progress class="UpAbci_progressionG"></progress>
<!-- progression textuelle -->
en cours : <span class="UpAbci_progressionT">0 Mo</span>
<!-- sauvegarde effectuée -->
- sauvegardé : <span class="UpAbci_backup">0 Mo</span>
<!-- temps passé -->
- temps passé : <span class="UpAbci_duration">0 s</span>
<!-- temps restant estimé -->
- temps restant : <span class="UpAbci_remainingTime">indéfini</span>
<!-- status (en attente, ok, erreur, arrêt)
Si le visiteur sélectionne un fichier comportant des erreurs (data-upabcicss-error-user) - dans notre cas la vérification ne concerne que l'extension du fichier - on affiche en rouge.
A la fin de l'upload du fichier (data-upabcicss-result) ou si le fichier est arrêté volontairement, le status s'affichera en rouge, excepté si le status est ok (data-upabcicss-result-ok) auquel cas il s'affichera en vert -->
- status : <span class="UpAbci_status" data-upabcicss-error-user="color:red;font-weight:bold" data-upabcicss-result="color:red;font-weight:bold" data-upabcicss-result-ok="color:#090;font-weight:bold">en attente</span>
</div>
<!-- on affiche le lien "arrêter tout" uniquement si des fichiers ont été sélectionnés et on l'efface à la fin du traitement du formulaire -->
<div class="UpAbci_stopAll" style="display:none;width:100px;margin:auto;font-size:0.9em;color:#900;cursor:pointer" data-upabcicss-select-file="display:block;margin-top:15px;" data-upabcicss-form-end="display:none">
Arrêter tout
</div>
<!-- on affiche cette ligne d'information si une sauvegarde est trouvée pour au moins un fichier à la fin du traitement (à noter qu'en cas de téléchargement complet d'un fichier il n'existe plus de sauvegarde)-->
<div style="margin-top:10px;display:none" data-upabcicss-backup-end="display:block">
<span style="font-weight:bold">Note : </span>les fichiers partiellement sauvegardés peuvent être complétés pendant 24h suivant la dernière sauvegarde effectuée.
</div>
</div>
</body>
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script>
// Destination de la requête ajax d'upload
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Php_Load_test.php';
// formulaire 1
var reponse_upload = $('#reponse_upload1');
var Up = new UploadAjaxABCI('#form_files1',destination_ajax, reponse_upload);
Up.config.queryFormEnd = true; // Indispensable dans ce script puisque l'enregistrement en bdd se fera lors de la requête additionnelle qui indique que tous les fichiers ont été traités
//Si vous souhaitez avoir un contrôle d'extensions différent sur chaque champ du formulaire, vous pouvez utiliser l'option ".config.filesExtensionsInput" qui prend comme index le nom de l'input de type file et comme valeur le tableau d'extensions autorisées, exemple :
Up.config.filesExtensionsInput['source'] = ['avi','divx','mp4','mkv','mpg','jpg','jpeg','png','gif'];
Up.config.filesExtensionsInput['vignette'] = ['jpg','jpeg','png','gif'];
Up.config.customFileSelect = ".bouton_fichiers";
Up.config.cssSubmitOn = "cursor:default;opacity:0.6"; // Durant le téléchargement des fichiers, applique ces styles sur le bouton d'envoi du formulaire.
Up.config.cssFileSelectOn = "cursor:default;opacity:0.6"; // Durant le téléchargement des fichiers, applique ces styles sur les boutons de sélection des fichiers.
// Contrôle des erreurs dans les champs du formulaire
var erreurs = {};
var input_files;
// Contrôle javascript des champs du formulaire on submit
Up.config.func_onFormSubmit = function(e,tab)
{
var UpAbci_infosServer = reponse_upload.find(".UpAbci_infosServer");
erreurs = {};
// Liste des input de type file indispensables. Si d'autres champs de type file sont indispensables compléter cette liste en attribuant au nom de l'input la valeur false.
input_files = {'source':false, 'vignette':false};
var form = e.target;
// Contrôle du champ titre
if ($.trim($(form).find("input[name=titre]").val()) == '') {erreurs['titre'] = 'Le titre doit être rempli';}
// Contrôle des champs input, met à true pour les fichiers renseignés
$.each(tab, function(t,v)
{
//console.log(v);
$.each(input_files, function(i)
{
if(v.fichier.upabciInputName == i && v.fichier.size > 0) {input_files[i] = true;}
})
})
// Enregistre les erreurs des champs de fichiers non renseignés
$.each(input_files, function(i,v)
{
if(!v) {erreurs[i] = 'Le fichier '+i+' est indispensable';}
})
reponse_upload.css('display','block');
UpAbci_infosServer.empty();
UpAbci_infosServer.css('display','block');
// Si pas d'erreurs on envoie un message de début de téléchargement et on soumet le formulaire avec func_SubmitForm()
if($.isEmptyObject(erreurs))
{
UpAbci_infosServer.append($("<p>Chargement en cours...</p>"));
Up.func_SubmitForm();
}
else
{
$.each(erreurs, function(i,m)
{
UpAbci_infosServer.append($("<p>"+m+"</p>"));
})
}
}
// Supprime les message d'erreur si les champs indispensables sont renseignés à la sélection des fichiers et insère le nom de l'input avant le nom du fichier
Up.config.func_FileSelectAll = function(e, tab)
{
var UpAbci_infosServer = reponse_upload.find(".UpAbci_infosServer");
var form = $(e.target).parents('form:first');
if ($.trim($(form).find("input[name=titre]").val()) != '' && erreurs['titre'] != 'undefined')
{
delete(erreurs['titre']);
}
var input_name;
$.each(tab, function(i,v)
{
input_name = v.fichier.upabciInputName;
if (erreurs[input_name] != 'undefined')
{
delete(erreurs[input_name]);
}
//console.log(v.obj);
// J'insère le nom de l'input avant le nom du fichier
$('<span style="text-transform:capitalize;font-size:1.1em;font-weight:bold">'+input_name+' : <span>').insertBefore(v.obj.name);
})
UpAbci_infosServer.empty();
if(!($.isEmptyObject(erreurs)))
{
UpAbci_infosServer.css('display','block');
$.each(erreurs, function(i,m)
{
UpAbci_infosServer.append($("<p>"+m+"</p>"));
})
}
else
{
UpAbci_infosServer.css('display','none');
}
}
// Démarrage de la fonction, DOM chargé
$(function(){Up.Start()});
</script>
</html> |
Répondre avec citation
Envoyé par Jarodd
Partager