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> |
Partager