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
| <?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 id="form_base" 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 id="reponse_upload">
<!--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 ayant l' id="reponse_upload") -->
<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 paramétrable (par défaut = 24H).</p>
</div>
<script src="Javascript/jquery.js"></script>
<script src="Javascript/UploadAjaxABCI.js"></script>
<script type="text/javascript">
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
var up = new UploadAjaxABCI('#form_base','Php_Upload/UploadAjaxABCI_Php_Load_Basique_wwilly17.php','#reponse_upload');
// 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. Ce message sera complété par le message défini dans le script php d'upload et affiché dans le conteneur d'information générale du fichier ayant la class="UpAbci_infosServer"
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é php par sécurité)
up.config.filesExtensions = ['avi','divx','mp4','mkv','mpg','jpg','jpeg','png'];
// Démarrage de la fonction, DOM chargé
$(function(){up.Start()});
</script>
</body>
</html> |
Travailler avec un input file /jquery/php
Répondre avec citation
Envoyé par wwilly17
Surtout il est écrit en haut de ce fichier 
. Merci c est sympa..
Partager