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
| <?php
//Utilise le fichier "Php_Upload/UploadAjaxABCI_Php_Load_Basique_wwilly17.php" comme destination Ajax
session_start();
header('Content-type: text/html; charset=UTF-8');
$UpAbci_fragmentSize = 8388608;// Taille maximale des fragments en octets (ici 8Mo). Doit être inférieur ou égal à la configuration "upload_max_filesize" du serveur. Voir le fichier "UploadAjaxABCI.php" pour un contrôle automatique de cette valeur. Les fichiers inférieurs à la taille maximale des fragments n'auront pas de sauvegarde temporaire.
$UpAbci_uniqidForm = hash("sha256",uniqid(rand(), true));
// Jeton de formulaire (token);
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqidForm] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>UploadAjaxABCI : upload de fichier avec Ajax/Jquery/Php/Html5</title>
<style type="text/css">
body {
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
}
.form_evenement {
width:800px;
margin:3em auto 0 auto;
font-size:0.9em;
line-height:1.5em;
}
.form_evenement progress {
width:100px;
}
</style>
</head>
<body>
<div class="form_evenement">
<form class="form_e" action="#" method="post">
<fieldset style="border:2px solid #000;border-radius:6px;padding:1em">
<legend>Le titre est obligatoire</legend>
<p><label>Titre <input autofocus required type="text" name="titre" maxlength="100" size="25" /></label></p>
<p style="margin-top:2em;"><span class="option_upload" style="text-decoration:underline;cursor:pointer"> Cliquer ici pour ajouter un fichier</span> (facultatif)</p>
<input type="hidden" value="<?=$UpAbci_fragmentSize?>" name="UpAbci_fragmentSize" />
<input type="hidden" value="<?=$UpAbci_uniqidForm?>" name="UpAbci_uniqidForm" />
<input type="file" name="fichier" style = "display:none" />
<!-- Bloc conteneur du retour d'informations -->
<div class="reponse">
<!--information du fichier que l'on affiche uniquement si un fichier est soumis avec le style événementiel "data-upabcicss-select-file", pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier -->
<div class="UpAbci_infosFile" style="display:none;margin-top:1em;" data-upabcicss-select-file="display:block;">
<p>
- <span class="UpAbci_name"></span><!-- nom du fichier -->
<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
<span class="UpAbci_status" data-upabcicss-result-error="color:red"></span><!-- status (important sinon pas de retour d'information) -->
<span class="UpAbci_stop" style="color:red;cursor:pointer;font-size:0.9em;float:right" data-upabcicss-result="display:none">stop</span>
</p>
<!-- Message qui s'affichera si l'upload du fichier a été arrêté manuellement par l'utilisateur (ce bloc doit être à l'intérieur du bloc ayant la class="UpAbci_infosFile") -->
<p style="display:none;margin-top:1em;" data-upabcicss-result-stop="display:block">
Arrêt du fichier. Rechargez ou changer votre fichier ou cliquer directement sur le bouton "envoyer" pour enregistrer l'événement sans fichier joint.
</p>
<!--Message qui s'affichera si erreur utilisateur (mauvaise extension) ou erreur serveur (ce bloc doit être à l'intérieur du bloc ayant la class="UpAbci_infosFile") -->
<p style="display:none;margin-top:1em;" data-upabcicss-result-error="display:block">
Un problème est survenu. Rechargez ou changer votre fichier ou cliquer directement sur le bouton "envoyer" pour enregistrer l'événement sans fichier joint.
</p>
</div>
<!-- Bloc conteneur du retour d'informations général renseigné par le script php d'upload (ce bloc doit être à l'intérieur du bloc d'information renseigné en troisième argument dans l'initialisation de la classe javascript) -->
<div class="UpAbci_infosServer" style="display:none;font-size:1.1em;margin-top:1em;" data-upabcicss-infos-server="display:block;border:2px solid blue;padding:1em;border-radius:6px"></div>
</div>
<p style="text-align:center"><input type="submit" value="Envoyer" /></p>
</fieldset>
</form>
<br>
<br>
<p>Notez qu'une sauvegarde automatique est effectuée tous les 8 Mo. Si vous avez téléchargé au minimum 8 Mo et que l'upload est stoppé avant la fin du téléchargement du fichier, vous pourrez utiliser la partie sauvegardée pour compléter ce fichier lors de sa prochaine sélection. La durée de disponibilité de la sauvegarde est de 24H.</p>
</div>
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script type="text/javascript">
var form = $(".form_evenement").find('form');
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
var up = new UploadAjaxABCI(form,'Php_Upload/UploadAjaxABCI_Php_Load_Basique_wwilly17.php','.reponse');
// configuration optionnelle. Voir le fichier "UploadAjaxABCI.php" pour plus d'infos.
// config upoad sur élément html ayant la class "option_upload"
up.config.customFileSelect = ".option_upload";
// message de status du fichier si ok.
up.info.status.ok = 'Ok';
// message de status du fichier si arrêt utilisateur. Ce message sera complété par le div ayant l'attribut data-upabcicss-result-stop
up.info.status.stop = 'Arrêt';
// Personnalisation du message si erreur de téléchargement du fichier en provenance du serveur
up.info.status.errorServer = 'Echec. ';
// Contrôle des extensions (le même contrôle doit être fait côté serveur par sécurité)
up.config.filesExtensions = ['avi','divx','mp4','mkv','mpg','jpg','jpeg','png'];
up.config.func_FormEnd = function(tableau)
{
/*Le paramètre "tableau" est un tableau de tableaux d'information sur tous les fichiers sélectionnés, 1 pour chaque fichier.
L'objectif du code ci-dessous est de fermer le bloc d'information des fichiers si aucun problème n'est survenu durant l'upload.
J'utilise la logique suivante : Si le nombre de fichiers (donc de tableaux) est égal au nombre de fichier terminés ok ou non soumis car stoppés avant la soumission du formulaire (erreur d'extension ou arrêtés manuellement), alors aucun incident n'est intervenu durant l'upload. On pourra donc dans ce cas fermer la fenêtre d'information des fichiers puisque la synthèse du résultat final est renvoyé depuis php dans "UpAbci_infosServer".
Compte le nombre de fichiers terminés ok ou non soumis
Les fichiers non soumis sont les fichiers arrêtes volontairement avant l'envoi et les fichiers présentant des erreurs utilisateur (taille ou extensison) traitées en javascript avant l'envoi du formulaire.
Cf mode d'emploi pour comprendre le contenu du tableau et de ses éléments
- "ok_done" est un fichier ok,
- "0_0" est un fichier non soumis.
*/
var cpt = 0;
$.each(tableau,function(i,v)
{
if(v.result == "ok_done" || v.result == "0_0")
{
cpt++;
}
})
if(tableau.length == cpt)// Aucun fichier joint et soumis au formulaire n'a eu d'erreur
{
// On peut fermer les informations de retour de fichier
form.find(".UpAbci_infosFile").css('display','none');
// Et vider le champ titre et remettre le focus (la valse des "required" est pour éviter un effet bizarre avec firefox, sinon le contour de l'input est surligné).
form.find("input[name=titre]").attr('required',false).val('').focus().attr('required',true);
}
}
// Démarrage de la fonction, DOM chargé
$(function(){up.Start()});
</script>
</body>
</html> |
