Exemples complets et fonctionnels avec classe php côté serveur.
Upload les fichiers par fragments compilés dans un fichier temporaire quand ils dépassent une valeur paramétrable. L'upload terminé, le fichier temporaire est renommé avec son nom initial (éventuellement corrigé) et déplacé vers son emplacement définitif.
- Surpasse les limitations serveur "upload_max_filesize" et "post_max_size".
- Permet la reprise d'un téléchargement interrompu après un arrêt volontaire ou une panne internet ou serveur en utilisant la partie sauvegardée.
- Supporte l'upload multiple et surpasse la configuration serveur "max_file_uploads" avec un système de file d'attente (queuing).
- Retour d'informations en temps réel, personnalisable et très souple :
1/ Dix informations (toutes optionnelles) sont disponibles durant l'upload : nom, taille, vignette de prévisualisation (si c'est une image), progression graphique, pourcentage, progression textuelle, sauvegarde partielle effectuée, temps passé, temps restant estimé, status (en cours, erreur, ok, arrêt), ainsi que deux commandes : "arrêter" et "arrêter-tout" qui permettent l'arrêt optimisé afin de pouvoir effectuer une reprise d'upload ultérieure dans les meilleures conditions.
2/ Styles événementiels (optionnels) qui s'appliquent en fonction des événements suivant : fichiers soumis, formulaire envoyé, sauvegarde partielle disponible, fichier en cours d'upload, upload terminé (quelque soit le résultat), upload terminé arrêté, upload terminé partiel, upload terminé erreur, upload terminé ok, fin d'upload (tous uploads terminés), sauvegarde pour au moins un fichier en fin d'upload, fin de traitement du formulaire (avec ou sans fichiers traités).
Exemple de base fonctionnel
(inclus dans le dossier proposé en bas de page)
1/ Html et configuration javascript
Permet un upload multiple et affiche pour chaque fichier :
- son nom
- la progression graphique
- le status (en cours, ok, arrêt, ou erreur)
- un bouton d'arrêt
Une sauvegarde automatique est effectuée tous les 6291456 = 6 Mo.
Si le téléchargement est ok, le status s'affichera en gras et couleur verte.
En fin d'upload d'un fichier, le bouton stop correspondant disparaîtra.
On pourrait ajouter d'autres informations en ajoutant simplement des lignes html dans le bloc d'information des fichiers (class="UpAbci_infos_upload")... ou en supprimer en supprimant tout aussi simplement les lignes correspondantes.
<?php
// Utilise le fichier "UploadAjaxABCI_Php_Load_Basique.php" comme destination Ajax
session_start();
header('Content-type: text/html; charset=UTF-8');
$UpAbci_max_fragment = 6291456;// taille maximale des fragments (doit être inférieur ou égal à la configuration 'upload_max_filesize' du serveur). Les fichiers inférieurs à cette taille n'auront pas de sauvegarde temporaire.
$UpAbci_uniqid_form = hash("sha256",uniqid(rand(), true));
// Jeton de formulaire (token)
$_SESSION['UploadAjaxABCI'][$UpAbci_uniqid_form] = 1;
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>UploadAjaxABCI : upload de fichiers par fragmentation avec Html5 et Ajax/Jquery/Php</title>
<script src="jquery.js"></script>
<script src="UploadAjaxABCI.js"></script>
<script type="text/javascript">
// Initialisation de la classe javascript (identifiant formulaire, destination ajax, identifiant réponse)
var up = new UploadAjaxABCI('#form_files','UploadAjaxABCI_Php_Load_Basique.php','#reponse_upload');
// configuration optionnelle (exemple). Voir le fichier "UploadAjaxABCI.php" pour plus d'infos.
up.config.ajax_delai = 750;// en milliseconde, espacement entre deux requêtes ajax (100 par défaut)
// Démarrage de la fonction, DOM chargé
$(function(){up.Start()});
</script>
</head>
<body style="font-family:Arial, Helvetica, sans-serif; font-size:1em;width:650px;margin:3em auto 0 auto">
<div>
<form id="form_files" action="#" method="post">
<fieldset style="border:2px solid #000;border-radius:5px;padding:1em">
<legend>Upload avec configuration de base : nom, progression graphique, status et arrêt</legend>
<input type="file" name="upload_simple" multiple="multiple" />
<input type="hidden" value="<?=$UpAbci_max_fragment?>" name="UpAbci_max_fragment" />
<input type="hidden" value="<?=$UpAbci_uniqid_form?>" name="UpAbci_uniqid_form" />
<input type="submit" value="Envoyer"/>
<!-- Bloc conteneur du retour d'informations -->
<div id="reponse_upload">
<!--information du fichier que l'on affiche uniquement si un fichier est soumis, pour éviter la barre de progression graphique vide si soumission du formulaire sans fichier-->
<div class="UpAbci_infos_upload" style="display:none;margin-top:1em;" data-upabcicss-submit-file="display:block;">
- <span class="UpAbci_nom"></span><!-- nom du fichier -->
<progress class="UpAbci_progressionG"></progress> <!-- progression graphique -->
<span class="UpAbci_status" data-upabcicss-result-ok="color:green;font-weight:bold">en attente</span><!-- status (important sinon pas de retour d'information en cas d'erreur) -->
<span class="UpAbci_arret" style="color:red;cursor:pointer;font-size:0.8em;float:right" data-upabcicss-result="display:none">stop</span>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html><?php
//UploadAjaxABCI_Php_Load_Basique Version 2.4
// Vous devez vérifier l'existence de ces dossiers ou changer ces adresses
/*------------------------------------------------------*/
$destination_upload = "Destination_Upload/";
$destination_temporaire = "Upload_Temp/";
/*------------------------------------------------------*/
session_start();
// Voir le fichier "UploadAjaxABCI_Php_Load.php" pour plus d'exemples détaillés.
// maximise les possibilités de reprise d'upload en cas d'arrêt intempestif.
ignore_user_abort(true);
header('Content-type: text/html; charset=UTF-8');
// Charge la classe php d'upload
require 'UploadAjaxABCIServeur.php';
//Initialisation de la classe php (dossier de destination, dossier temporaire)
$up = new UploadAjaxABCIServeur($destination_upload, $destination_temporaire);
// getUniqidForm() renvoie l'identifiant de formulaire pour la vérification ci-dessous
$unidid_form = $up->getUniqidForm();
// Il est conseillé de ne pas supprimer cette ligne car c'est le token qui assure que ce script est appelé depuis le formulaire
if(!(isset($unidid_form,$_SESSION['UploadAjaxABCI'][$unidid_form]))) $up->exitErreurFichier('Identifiant de formulaire non valide. Rafraîchissez la page');
$up->Upload();
// Le processus d'upload est dissocié de celui du transfert, pour permettre de traiter le fichier complet (par exemple pour faire des redimensionnements d'images en php etc.) avant de le déplacer vers son emplacement définitif (c.f "UploadAjaxABCI_Php_Load.php" pour des exemples).
$up->Transfert();
$up->exitReponseAjax();
?>
