Upload Ajax : surpasse les configurations serveur, retour d'informations dynamique configurable

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

04 Mars 2015, 19:10

Classe d'upload Ajax, Html5-Jquery

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>

2/ Code php côté serveur (fichier "UploadAjaxABCI_Php_Load_Basique.php")
<?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();
?>


Vous pouvez tester cet exemple (et d'autres) directement après avoir décompressé le dossier ci-dessous puis copier le dossier "Upload-Ajax-ABCI" sur votre serveur.
Upload-Ajax-ABCI-V2.4c.zip
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

09 Mai 2015, 02:26

Bonjour,

Nouvelle version 2.5

Permet de gérer les erreurs fatales du serveur lors d'éventuels traitements complémentaires à l'upload, comme les redimensionnements d'images qui pourraient produire un dépassement de memory limit par exemple.

Un fichier d'exemple spécifique pour les redimensionnements d'images à été ajouté.

Les deux classes javascript et php ainsi que le mode d'emploi ont été mis à jour.

Upload-Ajax-ABCI-V2.5c.zip
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

29 Mai 2015, 21:32

Bonjour,

La classe est maintenant finalisée en version 3.0.

1/ La fonction de prévisualisation des images a été optimisée
- Utilisation de "URL.createObjectURL" en remplacement de "FileReader".
Les gains sont spectaculaires.

2/ Nouvelles fonctionnalités mises en exemple dans le fichier "UploadAjaxABCI_Custom.php" :
(ce fichier propose un module fonctionnel customisé et prêt à l'emploi)
- Customisation du bouton de sélection des fichiers avec comportement click et drag and drop
- Fonctions javascript événementielles.
- Nouveau style événementiel pour réserver un espace de prévisualisation si le fichier est une image

3/ Correction de 3 petites erreurs
- Seule la largeur indiquée était prise en compte pour le dimensionnement de l'image de prévisualisation, la hauteur était proportionnelle mais ne pouvait pas être paramétrée individuellement.
- La fonction de redimension d'image proposée côté php pouvait effectuer un redimensionnement non souhaité (agrandissement) si l'image source était plus petite que le redimensionnement désiré.
- Le bouton d'arrêt des fichiers pouvait renvoyer des css événementiels erronés (bien que le fichier soit correctement téléchargé) si on l'utilisait une à deux secondes juste avant la fin du téléchargement du fichier.

Je rappelle les fonctionnalités principales :
- Surpasse les limites serveur
- Reprise d'upload possible pour les gros fichiers
- Upload multiple
- Retours d'informations en temps réel configurables
- Styles et fonctions événementielles
- Boutons de sélections configurables avec comportements drag and drop et/ou onclick
- Vignettes de prévisualisation des images
- Exemples prêts à l'emploi dont un customisé, avec classe php fournie côté serveur

Lien de téléchargement ci-dessous.
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

06 Juin 2015, 19:46

Version 3.0c

1/ Prise en compte et résolution du bug de reset avec IE10
Ce bug empêchait de pouvoir recharger exactement le(s) même(s) fichier(s) sans rafraichir la page. C'est un cas de figure assez rare habituellement. Mais comme un des avantages de cette solution d'upload est de pouvoir stopper un téléchargement et pouvoir le reprendre par la suite en utilisant la partie sauvegardée, ce cas de figure pouvait se présenter plus souvent et le bug pouvait s'avérer un peu déroutant pour un utilisateur non averti (fallait auparavant impérativement rafraîchir la page avec ce navigateur).

2/ Amélioration de la mise en page de l'exemple customisé prêt à l'emploi (fichier "UploadAjaxABCI_Custom.php")


Upload-Ajax-ABCI-V3.0c.zip
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Petit nouveau ! | 7 Messages

23 Juin 2015, 15:13

Bonjour,

Super script fonctionne très bien!

Par contre j'aimerais savoir si il est possible d'afficher automatiquement un lien vers le fichier upload ?


cordialement

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

24 Juin 2015, 01:30

yoyo1985 a écrit :Bonjour,

Super script fonctionne très bien!

Par contre j'aimerais savoir si il est possible d'afficher automatiquement un lien vers le fichier upload ?


cordialement

C'est à dire ? Un lien en retour vers le fichier uploadé ?

Si oui il y a plusieurs exemples qui permettent de retourner le nom du fichier uploadé s'il a été renommé. Il suffit donc de modifier le retour serveur et de le remplacer par un lien.

Par exemple si on utilise le script d'upload ajax "UploadAjaxABCI_Custom.php", le fichier serveur correspondant (situé dans le dossier "Php_Upload") se nomme "UploadAjaxABCI_Php_Load_Custom.php".
Dans ce fichier serveur il te suffit de remplacer les lignes :

Code : Tout sélectionner

if ($nom_fichier_originel != $nom_final)
{
   $up->addStatusOkAjax("renommé ".$nom_final);
}

par :

Code : Tout sélectionner

// $chemin = chemin du dossier de destination par rapport au script d'upload ajax ("UploadAjaxABCI_Custom.php" dans notre exemple)
$chemin = 'Destination_Upload/';
$up->addStatusOkAjax('<a href="'.$chemin.$nom_final.'" target="blank">'.$nom_final.'</a>');

(j'ai mis target = blank pour ouvrir le lien dans un nouvel onglet)
Voilà c'tout :)

Petit nouveau ! | 7 Messages

24 Juin 2015, 10:34

Bonjour,

Merci beaucoup ça fonctionne :)


Par contre serait-il possible de faire en sorte que le lien de la photo s intègre automatiquement dans une autre page ?

Je m'explique:

- Je upload la photo
- Un lien apparaît je clique dessus et la une page intermédiaire s' ouvre avec le lien pour télécharger la photo en plein milieux de la page.


Cordialement.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

24 Juin 2015, 13:30

Salut,

T'as un problème de méthodologie. Faut séparer les problèmes.

Une fois le fichier uploadé tu peux par exemple enregistrer son nom dans une base de donnée - y'a des exemples dans les commentaires des fichiers serveurs (situé dans le dossier "Php_Upload") pour indiquer le bon endroit pour le faire - et ensuite utiliser la liste enregistrée en bdd pour créer ta seconde page, ou simplement lire les fichiers de ton dossier de téléchargement pour créer cette seconde page. Au passage je vois pas très bien pourquoi quelqu'un qui vient d'uploader un fichier vers le serveur aurait besoin d'un lien pour le télécharger...

Enfin bon peut importe, de toutes façons un script d'upload s'arrête à l'upload, Tu fais ce que tu veux ensuite. Si tu n'as pas compris la méthodologie pose ta question dans le forum "PHP débutant" car cela n'a rien à voir avec le fonctionnement de ce module d'upload :wink:

Petit nouveau ! | 7 Messages

24 Juin 2015, 17:54

merci pour votre aide,
j'y connnais rien en php etc... je met seulement le nez dedans...

merci bien


je vais vous contacter via le site dans votre signature pour un projet.


cordialement

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

27 Sep 2015, 04:29

Version 4.0 en lien ci-dessous
Grosse mise à jour pour cette nouvelle version

Nouveaux styles css événementiels :
- data-upabcicss-infos-serveur (le serveur a envoyé un message vers .UpAbci_infosServer)
- data-upabcicss-error-img-prev-total (total images supérieur à "config.imgPreviewMaxSizeTotal")
- data-upabcicss-error-img-prev (taille image supérieure à "config.imgPreviewMaxSize")
- data-upabcicss-error-user (erreur d'extension ou de taille autorisée)
- data-upabcicss-remaning-time-compute (s'applique après la durée de config.remainingTimeCompute)

Nouvelles options de configuration :
- filesExtensionsInput (permet de filtrer des extensions différentes en cas d'input file multiples)
- imgPreviewMaxSizeCancelAll (permet d'annuler la prévisualisation de toutes les images si la valeur de config.imgPreviewMaxSize est dépassée pour au moins une image)
- browserOutdeted (comportement de la classe javascript si navigateur obsolète. Remplace le quatrième paramètre optionnel dans l'initialisation de la classe).

Nouvelles fonctions javascript événementielles :
- func_ImgPreviewLoadEach (trigger pour chaque image de prévisualisation disponible et chargée)
- func_FileSelectAllBefore (trigger pour chaque sélection de fichiers avant l'affichage des informations)
- func_FileSelectEach (trigger pour chaque fichier après l'affichage de ses informations)
- func_FileInProgressEach (trigger durant la progression du téléchargement de chaque fichier)
- func_FileEndEach (trigger à la fin du téléchargement de chaque fichier)

Toutes les fonctions javascript ont maintenant un accès direct aux paramètres et objets de la classe.
Cela permet une meilleure interaction avec des scripts externes, et de modifier directement des objets html d'informations sans avoir besoin de parser le DOM.

A cette occasion je donne deux exemples de crop multiples (fonctionnels) qui utilisent les fonctions événementielles en relation avec le module "jquery imgAreaSelect" :)

L'exemple "custom" a également été amélioré :)


Cette version n'est pas compatible avec les précédentes, tous les paramètres et fonctions on été renommés (c'était nécessaire).

En complément des nouvelles fonctionnalités, la version 4.0 apporte quelques petites améliorations et corrections :
Amélioration :
Toutes versions : en cas de contrôle de l'extension ou de la taille des fichiers, l'affichage de l'erreur est maintenant immédiate.
Apparavant les fichiers n'étaient pas soumis mais il fallait appuyer sur le bouton d'envoi pour voir s'afficher le message correspondant.

Corrections :
- Version 3.0c uniquement : les boutons de sélection de fichiers ne se mettaient plus en disable lors de la soumission du formulaire comme dans les versions précédentes. Ce problème n'affectait pas les boutons files customisés qui fonctionnaient comme prévu. Corrigé.
- Toutes versions : en cas de champs de type file multiples, le status arrêt d'un fichier provenant d'un premier champ était annulé si on re sélectionnait des fichiers depuis un autre champ. Corrigé.

Le mode d'emploi a été mis à jour :)

Il m'est impossible de mettre le dossier zip complet en pièce jointe (trop gros).
Vous trouverez donc un lien pour le dossier des fichiers de code et un lien pour le mode d'emploi.
Quant au mode d'emploi du script de crop qui est intégré dans deux de mes exemples c'est ici imgAreaSelect

Sinon vous pouvez vous rendre à cette adresse pour le dossier complet (contient les fichiers de code et les modes d'emploi).
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

27 Sep 2015, 19:58

Petite correction "css" dans les exemples de crop : la classe ".UpAbci_infosFile" doit être en position relative pour que la sélection dans l'image (crop) se positionne par rapport à ce bloc. Les exemples fonctionnaient correctement mais autant prendre cette précaution qui offre plus de stabilité en cas de modification du DOM après avoir effectué la sélection.

Ci-joint les codes sources.
Vous ne pouvez pas consulter les fichiers insérés à ce message.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

26 Nov 2015, 01:02

Bonjour,

Une dernière version 4.3c ici.

Nouvelles fonctions qui permettent d'élargir le domaine d'application du module. L'intérêt est de pouvoir conserver les fonctionnalités concernant l'upload des fichiers tout en exerçant un contrôle complémentaire complet sur l'ensemble du formulaire.

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

17 Fév 2016, 00:57

Version 5.0c

Le dossier complet prêt à l'emploi qui comprend une quinzaine d'exemples tous fonctionnels et un mode d'emploi est trop volumineux pour être posté dans les messages de ce forum. Aussi je vous invite à suivre le lien ci-dessus pour le téléchargement.

- La dernière version 5.0c comprend une réorganisation du code serveur pour permettre de centraliser tous les messages côté client et côté serveur dans un fichier unique.

- Un exemple de formulaire d'inscription a également été ajouté avec une option pour joindre un avatar éventuellement recadré par le visiteur. L'upload du fichier se lance automatiquement une fois l'inscription vérifiée et enregistrée. Le système comprend en fait deux formulaires qui sont regroupés dans un seul formulaire visible par le visiteur.

- Le mode d'emploi comporte désormais un chapitre spécial débutants pour la mise en production, l'externalisation des formulaires et des dossiers d'upload.
:)

Avatar de l’utilisateur
ViPHP
AB
ViPHP | 5818 Messages

10 Août 2016, 01:46

Bonjour,

Version 6.1

Mode d'emploi complet du module d'upload ajax en version 6.1 avec lien de téléchargement.

Le détail des fonctionnalités supplémentaires par rapport à la version 5 est donné ici.
Notamment la classe est maintenant fournie avec des exemples compatibles avec les navigateurs obsolètes.