Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous

Identifiant
Mot de passe

Mot de passe oublié ?

Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Tutoriel pour outil d'upload AJAX-PHP prêt à l'emploi

Par Alain Bontemps

Le 27 janvier 2017 à 12:58, par Community Management

298 commentaires

68PARTAGES

Chers membres du club,
Je vous présente ce tutoriel de Alain Bontemps pour apprendre à configurer et utiliser un outil complet programmé en Ajax et PHP pour l'upload de fichiers.

Solution complète d'upload Ajax-jQuery avec classes PHP serveur. Informations en temps réel, styles et fonctions JavaScript événementiels, file d'attente et fragmentation.

Bonne lecture et n'hésitez pas à apporter vos commentaires

Retrouvez les meilleurs cours et tutoriels pour apprendre la programmation Web

Retrouvez les meilleurs cours et tutoriels pour apprendre la programmation PHP

Une erreur dans cette actualité ? Signalez-nous-la !

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

298 commentaires

Commenter Signaler un problème

ABCIWEB

Expert éminent sénior

Le 13/11/2017 à 2:03

Bonjour,

La version 6.6 est disponible

1/ Modification des classes optionnelles de traitement d'images dans les fichiers :
- CropRedim.php
- RedimImage.php
Corrige le bug retourné par la fonction native imagecreatefromjpeg - détail ici - sur des photos non entièrement conformes au standard en provenance de certains appareils photo numériques (typiquement selfies Samsung), ce qui rendait impossible les redimensionnements et recadrages sur ces images.

2/ Amélioration de l'affichage du mode d'emploi pour une meilleure stabilité au chargement de la page (auparavant les blocs prenaient souvent une fraction de seconde pour se positionner correctement), et quelques améliorations mineures dans les css de certains fichiers d'exemples.

Voilà

ABCIWEB

Expert éminent sénior

Le 06/03/2017 à 22:00

Bonjour,

Merci pour cette question

La classe ne propose pas nativement cette information mais on peut la créer avec les fonctions javascript événementielles qui servent précisément à personnaliser le script selon ses besoins. Cela me donne l'occasion de montrer un exemple d'utilisation de la fonction javascript événementielle config.func_FileInProgressEach qui est tout indiquée dans ce cas.

Voici donc un exemple basé sur le code du fichier UploadAjaxABCI_Basique.php fourni dans le dossier en téléchargement :

Je rajoute un élément html ayant une classe vt pour afficher la vitesse de transfert à l'intérieur du bloc d'information spécifique à chaque fichier défini avec la classe "UpAbci_infosFile" :

Code html :

Sélectionner tout

1
2
3
4
5
6
7
8
9
<div class="UpAbci_infosFile" style="display:none;margin-top:1em;" data-upabcicss-select-file="display:block;"> 
            <span class="UpAbci_imgPreview"></span><!-- vignette de prévisualisation (si le fichier est une image) --> 
            <span class="UpAbci_name"></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><!-- pour informer du statut "en cours", "ok", "erreur" ou "arrêt" en fonction de l'état du téléchargement. La mention "en attente" est écrite par défaut et sera remplacée par l'information adéquate durant le téléchargement du fichier. --> 
            <span class="vt"></span><!-- vitesse de transfert --> 
  
            <span class="UpAbci_stop" style="color:red;cursor:pointer;float:right" data-upabcicss-result="display:none">stop</span> 
         </div>

Côté javascript (en bas de page) j'utilise donc la fonction javascript événementielle config.func_FileInProgressEach qui est appelée lors de la progression des fichiers (à une fréquence définie par l'option de configuration javascript "config.infosRefresh" soit actuellement chaque seconde). J'utilise le paramètre obj de la fonction pour récupérer les informations nécessaires et faire afficher la vitesse de l'upload.

Avant cela j'ai créé une fonction BitFormate qui permet de formater le résultat en Kb/s, Mb/s, Gb/s ...

Le reste est documenté dans le code :

Code html :

Sélectionner tout

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
<script> 
"use strict"; // Vous pouvez supprimer cette ligne en cas d'utilisation d'autres scripts javascript qui ne supportent pas ce mode. 
  
var destination_ajax = 'Php_Upload/UploadAjaxABCI_Php_Load_Basique.php';  
  
var up = new UploadAjaxABCI('#form_base',destination_ajax,'#reponse_upload'); 
  
var BitFormate = function (Bits) 
{ 
        var Type = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"]; 
        var Index = 0; 
        while(Bits >= 1000) 
        { 
                Bits /= 1000; 
                Index++; 
        } 
        // J'arrondi à 1 chiffre après la virgule pour '', 'K' et 'M', et 3 chiffres après la virgule pour les unités supérieures  
        Bits = Type[Index] == 'M' || Type[Index] == 'K' || Type[Index] == '' ?  Bits.toFixed(1) : Bits.toFixed(3); 
        var unite = 'b/s'; 
        return(Bits+''+Type[Index]+''+unite); 
} 
  
up.config.func_FileInProgressEach = function(obj) 
{        
         // Utilisez console.log(obj) pour visualiser les propriétés de l'objet dans la console javascript 
  
         // La propriété "qte_upload" inclut initialement la quantité sauvegardée "qte_save_ini" en cas de reprise d'upload si on a précédemment stoppé l'upload du fichier en cours. Je retire donc cette valeur et je multiplie le résultat (qui est en octet) par huit pour avoir des bits qui sont l'unité de transfert des données. 
        var bit_upload = (obj.qte_upload - obj.qte_save_ini) * 8; 
         
        // la propriété "time_end" est déjà formatée en secondes, par contre "time_start" est en millisecondes. 
        var time_upload = obj.time_end - obj.time_start/1000; 
         
        // Cela ne devrait pas arriver mais je vérifie par sécurité que time_upload soit supérieur à 0 pour éventuellement éviter une vilaine division par 0.  
        if(typeof time_upload === "number" && time_upload > 0) 
        { 
                // La propriété "infos_html" de l'objet passé en paramètre à la fonction événementielle correspond à l'objet html ayant la classe "UpAbci_infosFile". Je fais afficher la vitesse formatée dans l'élément ayant la classe "vt" 
                obj.infos_html.find(".vt").html(BitFormate(bit_upload/time_upload)); 
        } 
} 
  
$(function(){up.Start()}); 
</script>

A noter que la vitesse instantanée au démarrage est toujours surévaluée par rapport au débit normal. Le débit affiché va donc logiquement s'effondrer durant les premières secondes ce qui pourrait éventuellement perturber des utilisateurs non avertis, même si c'est normal.

Pour avoir un débit plus représentatif dès le premier affichage on peut différer l'affichage de cette information en utilisant le style événementiel data-upabcicss-remaning-time-compute (qui est appliqué après le délai défini avec l'option de configuration javascript "config.remainingTimeCompute" par défaut égal à 10 secondes). Par exemple :

Code html :

Sélectionner tout

<span class="vt" style="display:none" data-upabcicss-remaning-time-compute="display:inline"></span><!-- vitesse de transfert -->

La vitesse de transfert sera ainsi plus représentative dès le premier affichage puisqu'elle ne s'affichera qu'après un délai de 10 secondes. Le seul inconvénient de cette option, si c'en est un, c'est qu'elle ne s'affichera pas pour les fichiers mettant moins de 10 secondes pour être téléchargés.

Voilà

ABCIWEB

Expert éminent sénior

Le 10/07/2017 à 3:17

Salut,

Petit bug avec php 7.1.6 donc probablement avec les versions php 7.1+ (le code était ok pour php 7.0+).

Il faut modifier légèrement la fonction returnOctets qui se trouve dans le fichier Php_Upload/Classes/UploadABCIServices.php

Voici le code corrigé :

Code php :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public function returnOctets($val) 
{ // Retourne des octets depuis une chaine formatée comme 25ko ou 100 Mo ou 1 g 
	$val = str_replace([',',' '],['.',''],$val); 
	$val = rtrim($val, "oO"); 
  
	$last = strtolower(substr($val,-1)); 
  
	$val = floatval($val); 
  
	switch($last) 
	{ 
		case 't':  $val *= 1024; 
		case 'g':  $val *= 1024; 
		case 'm': $val *= 1024; 
		case 'k':  $val *= 1024; 
	} 
	return $val; 
}

Php devient maintenant parfois un peu susceptible avec les variables non typées...

Je proposerai une nouvelle version avec cette correction quand j'aurai eu le temps de tester plus en profondeur tous les scripts proposés dans le module.

En attendant je n'ai trouvé que cette erreur après avoir installé ce module d'upload pour un site qui utilise php 7.1.6 avec les fonctionnalités d'upload, de redimensionnement d'images et de vérification des fichiers déjà existants avant upload.

ABCIWEB

Expert éminent sénior

Le 11/09/2017 à 4:23

Hello !

La version 6.5 est en ligne depuis quelques jours.

Rien de révolutionnaire puisque j'ai simplement intégré la petite correction pour php 7.1+ détaillée dans ce message.

Côté javascript j'ai testé la compatibilité avec la dernière version 3.2.1 de jQuery et c'est ok. Bien entendu, n'utilisez pas les versions "slim" de jQuery qui sont dépourvues des fonctionnalités Ajax.

ABCIWEB

Expert éminent sénior

Le 08/03/2018 à 23:03

Bonjour,

Correction concernant l'utilisation de la fonction urldecode() dans les scripts php d'upload (répertoire Php_Upload/). C'est fonction n'est pas utile, et son emploi a comme inconvénient de ne pas pouvoir récupérer les caractères "+" transmis dans le formulaire (qui sont remplacés par un espace vide).

Ce problème n'affecte pas le système d'upload lui-même (ce qui explique qu'i n'a pas été détecté plus tôt), il concerne uniquement les champs text que vous auriez pu ajouter dans le formulaire. Il suffit donc de récupérer vos variables de manière tout à fait classique dans la super globale $_POST.

Code php :

Sélectionner tout

$ma_variable = isset($_POST['ma_variable']) ? $_POST['ma_variable'] : null;

Je posterai d'ici quelques temps une nouvelle version avec cette correction et quelques améliorations côté javascript et php.

ABCIWEB

Expert éminent sénior

Le 18/04/2018 à 4:47

Bonjour,

La version 7.0 est disponible

Elle corrige l'emploi de la fonction urldecode() côté php ainsi que la ligne qui définit $upload_max_filesize dans les formulaires d'exemples, comme indiqué dans ce message. Le plugin jQuery fileEXIF a également été remplacé, voir la fin du paragraphe suivant.

Comme annoncé précédemment, cette version n'est pas compatible avec les précédentes car certaines propriétés et méthodes ont été renommées pour faciliter la création de code sur mesure. De plus, certaines classes php annexes ont désormais une gestion des exceptions plus classique et lisible.

Mise à jour de la classe javascript
- Les champs de saisie éventuellement ajoutés dans les informations spécifiques à chaque fichiers sont désormais transmis uniquement dans les requêtes envoyant le fichier correspondant, ce qui permet de les récupérer sans ambiguïté côté serveur même en cas d'upload multiple. Une classe html prédéfinie UpAbci_inputInfosFileUnic complète ce dispositif afin de renommer certains champs, typiquement les boutons de type radio qui ne permettent qu'une sélection dans tout le formulaire pour un champ de même nom (par nature incompatible avec un upload multiple).

- Une option config.inputFormAttrOnSubmit a été ajoutée pour permettre d'attribuer automatiquement à la soumission du formulaire, l'attribut "disabled" ou "required" aux champs de saisies éventuellement ajoutés dans le bloc d'information spécifique aux fichiers, afin d'indiquer à l'utilisateur que leur valeur ne peut pas être modifiée durant l'upload.

- Le style événementiel data-upabcicss-upload-end est appliqué également avant la soumission du formulaire si tous les fichiers on été arrêtés avant l'envoi du formulaire. Auparavant ce style n'était appliqué qu'au retour de la requête ajax, après l'envoi du formulaire. Cela permet d'étendre ses possibilités et de mieux le différencier du style data-upabcicss-form-end qui lui est appliqué au retour de la requête ajax avec ou sans fichiers joints.

. La fonction de prévisualisation des images sait désormais réorienter des images mal orientées en fonction de leurs informations EXIF (à condition qu'elles soient bien renseignées). Cette fonctionnalité est compatible avec les exemples de Crop (recadrage) et redimensionnements.

- Une option de configuration config.imgPreviewUseFileReader est également disponible pour permettre d'utiliser l'objet "FileReader" plutôt que "createObjectURL" afin de compenser le bug 1434496 de firefox pour la prévisualisation des images. Des exemples de code montrent comment utiliser cette option uniquement pour Firefox (le temps que l'équipe Mozilla corrige ce bug) car "FileReader" est bien plus gourmand en ressources que "createObjectURL".

- Une classe annexe DrawCanvasABCI est fournie pour créer un système de notation graphique des fichiers (coeurs ou étoiles, possibilité d'ajouter d'autres dessins) facilement intégrable dans la configuration javascript du formulaire, exemple en démonstration dans le fichier UploadAjaxABCI_Champs_Sup_Notation.php.

Correction code annexe : je donnais dans le tutoriel, un exemple d'utilisation des fonctions javascript événementielles avec le plugin jQuery file-exif pour afficher les informations Exif des appareils photo numériques. Or il s'avère que ce plugin n'est pas compatible avec IE10. Mon exemple utilise donc maintenant cette librairie.

Mise à jour du code Php
- 2 corrections énoncées au début de ce messge.

- Une nouvelle méthode getInputInfosFileUnic('index') permet de récupérer la valeur des champs auxquels on a attribué la classe UpAbci_inputInfosFileUnic.

- Une classe CorrectionExifJpg.php est fournie pour réorienter des images mal orientées en fonction de leurs informations EXIF (à condition qu'elles soient bien renseignées). Cette fonctionnalité est compatible avec les exemples de Crop (recadrage) et redimensionnements. C'est le complément indispensable de la fonctionnalité équivalente en javascript. Des exemples sont fournis dans les scripts de redimensionnements et de recadrage.

Modification : les classes annexes "C_PDO", "CropRedim", "RedimImage" et "CorrectionExifJpg" doivent être utilisées dans un bloc try/catch. Cela permet un code plus classique et lisible pour la gestion des exceptions.

Fichiers d'exemples
- Le fichier UploadAjaxABCI_Champs_Sup_Notation.php a été ajouté. Il regroupe les possibilités d'échange de données entre client et serveur et des exemples d'utilisation des fonctions javascript événementielles.

- Tous les fichiers d'exemples ont été revus.

Mode d'emploi
Le mode d'emploi a été mis à jour et des paragraphes ont été ajoutés pour répondre aux principales questions qui ont été posées depuis le début de ce topic.

=>

Pensez à utiliser les boutons + dans le menu du mode d'emploi qui permettent de maintenir les rubriques ouvertes pour avoir l'équivalent d'une FAQ.

Tuto mis à jour.

Voilà

ABCIWEB

Expert éminent sénior

Le 22/08/2018 à 22:29

La version 7.2 est disponible.

A/ Corrections
Classe javascript
1/ Bug version 7.0 uniquement : Il y avait une incompatibilité entre les options de configurations javascript config.submitWithoutFile et config.inputFormAttrOnSubmit. La soumission du formulaire sans fichiers joints ne permettait pas la réinitialisation des inputs si les deux options étaient utilisées conjointement.
2/ Bug versions 7.0 et 7.1 : Le bouton "arrêter tout" restait fonctionnel après la fin du traitement du formulaire. Cela provoquait un affichage erroné (mais sans conséquence réelle) si l'on cliquait sur ce bouton après la fin du traitement même si cela n'avait aucun effet sur les fichiers téléchargés.

Classe php
1/ Bug version 7.0 uniquement : Corrections de la classe Php_Upload/Classes/CorrectionExifJpg. La fonction exif_read_data pouvait pour certaines (rares) images, renvoyer un warning bien que cela ne soit pas spécifié dans la doc php.
2/ Bug TOUTES versions : L'index iteration_form qui retourne le nombre d'itération de la requête ajax pour le traitement du formulaire, disponible dans les tableaux $UpAbci_form et $UpAbci_formEnd (cf mode d'emploi : Configuration serveur->Récupération des paramètres Ajax prédéfinis) ne retournait pas la bonne valeur dans tous les cas. C'était un bug toutes versions mais négligeable dans le sens où cette valeur est rarement utile et jamais utilisée dans les exemples fournis.

B/ Modification du comportement par défaut de la classe javascript
Précédemment et toutes versions confondues, le bloc d'information spécifique aux fichiers, renseigné en troisième paramètre dans l'initialisation de la classe javascript, était réinitialisé automatiquement en cas de soumissions multiples du formulaire. C'était un comportement logique dans la plupart des cas, mais qui pouvait s'avérer gênant dans certaines conditions particulières, par exemple si l'on veut garder l'affichage des fichiers déjà uploadés dans le cas de soumissions multiples. Ce comportement automatique a été supprimé pour préserver un maximum de possibilités de programmation et d'affichage, et n'a pas été remplacé par une option javascript correspondante car l'on peut faire l'équivalent de ce comportement en appliquant conjointement les styles événementiels data-upabcicss-submit="display:none" et data-upabcicss-submit-file="display:block" sur le bloc d'information des fichiers.

C/ Ajout d'un fichier d'exemple
Le fichier d'exemple pour la création/modification d'albums photo (cité dans mes derniers messages) a été légèrement amélioré et intégré dans le dossier de test prêt à l'emploi.

...et quelques corrections mineures ont été faites dans le mode d'emploi.

Voilà

(note : la version 7.1 n'a été disponible que quelques jours. La version 7.2 corrige le paramétrage de certains styles événementiels dans quelques fichiers d'exemples qui avaient été oubliés dans la version 7.1 pour tenir compte de la modification de comportement indiqué ci-dessus, ainsi que le point n°2 des corrections javascript)

ABCIWEB

Expert éminent sénior

Le 22/10/2018 à 8:14

Bonjour,

Mise à jour du mode d'emploi dans la nouvelle version v7.2cc

Aucune correction/modification de code dans les classes Javascript et Php par rapport à la version 7.2

Quelques micro optimisations sans importance et la méthode interne Javascript "FormateBits" à été renommée "FormateOctets" pour éviter toute confusion. Cela ne change rien au fonctionnement interne ni au paramétrage de la classe.

Petites modifications dans le contenu du mode d'emploi, et plus particulièrement dans le fonctionnement du menu qui permet maintenant de visualiser le positionnement de l'information dans le menu depuis un lien externe ou interne si ce lien correspond à un chapitre du menu.

ABCIWEB

Expert éminent sénior

Le 09/06/2019 à 20:06

Upload Ajax-Php, version 7.4

Rappel pour les nouveaux lecteurs ou utilisateurs :
Tous les exemples fournis dans le dossier proposé en téléchargement sont entièrement fonctionnels. Il suffit de décompresser le zip et de poser le dossier Upload-Ajax-ABCI sur un serveur Php pour faire les premiers essais.

Notez qu'il est possible de configurer un script en quelques lignes de code aussi bien côté client que côté serveur. Voir ce tuto pour plus d'informations. Les options de configuration, les fonctions et les styles événementiels servent uniquement pour personnaliser le retour d'information en temps réel et pour répondre aux besoins les plus divers.

Important :
Cette mise à jour peut être appliquée de façon transparente à partir de la version 7.0.

Classe Javascript

Ajout

Ajout d'une option de configuration : config.RevokeObjectURL=true.
La méthode "RevokeObjectURL" est utilisée par défaut pour supprimer la référence au fichier lors de la création des vignettes de prévisualisation, et permettre une meilleure efficacité du nettoyage des ressources. Si = false cette référence n'est pas supprimée, ce qui permet si besoin de cloner l'objet "infosFile" qui contient les informations spécifiques au fichier, pour pouvoir ensuite le déplacer dans le DOM tout en préservant la vignette de prévisualisation.

Correction

Correction d'un bug d'affichage avec la fonctionnalité "arrêtez-tout" et les fichiers précédemment téléchargés.
Depuis la version 7.0, la fonctionnalité "arrêtez-tout" (proposée par la classe html prédéfinie UpAbci_stopAll) déclenchait le style événementiel data-upabcicss-result-stop (si défini) et affichait le status "arrêt" pour les fichiers précédents déjà téléchargés avec succès en cas d'upload multiple. C'est corrigé, puisqu'ils sont déjà téléchargés leur état ne doit pas changer. Notez que cela provoquait uniquement un bug d'affichage, mais sans conséquence pour l'upload des fichiers.

Améliorations

1/ Amélioration du comportement du style événementiel data-upabcicss-result-partial.
Ce style événementiel ne se déclenche plus lorsqu'on stoppe la soumission du fichier avant la soumission du formulaire, même si le fichier dispose d'une sauvegarde. Il n'est éventuellement déclenché qu'après que le fichier soit traité par le serveur et donc après la soumission du formulaire. Ceci afin d'obtenir une différence de comportement plus marquée par rapport au style événementiel data-upabcicss-backup qui peut s'afficher également avant la soumission du formulaire et également dès la sélection des fichiers si le fichier dispose d'une sauvegarde. Il est ainsi possible de différencier une nouvelle sauvegarde créée ou complétée durant le processus d'upload par rapport à une sauvegarde déjà existante, lors de l'utilisation des fonctions d'arrêt.

Notez que cette modification de comportement n'a pas eu d'impact sur mes exemples de code qui utilisaient ce style. Cela ne devrait donc pas gêner la grande majorité des codes existants.

2/ Modification de l'affichage du status du fichier avec la fonctionnalité "arrêtez-tout" pour les fichiers non valides.
La fonctionnalité "arrêtez-tout" ne modifient plus le status du fichier (bloc html ayant la classe prédéfinie "UpAbci_status") pour les fichiers non valides, alors qu'auparavant elle le renseignait avec la valeur de "info.status.stop" ("Arrêt" par défaut). C'était anachronique, car ces fichiers étant déjà annoncés comme non valides, on ne s'attendait plus à voir de changement d'état. Cette nouvelle approche est plus cohérente et permet de faire la distinction entre les fichiers non valides arrêtés automatiquement et les fichiers arrêtés volontairement par l'utilisateur.

Aucune modification n'a été faite concernant le bouton d'arrêt spécifique à chaque fichier, puisqu'en cas de fichier non valide, la fonctionnalité d'arrêt n'est pas activée étant donné que le fichier est arrêté automatiquement, donc le problème ne se posait pas.

3/ Amélioration du format accepté dans les options de configuration config.filesExtensions et config.filesExtensionsInput.
Le tableau passé en paramètre accepte maintenant des extensions précédées ou non d'un point (précédemment les extensions devaient être indiquées sans point). Etant donné que ces extensions sont insensibles à la casse, les tableaux suivants sont identiques : ['.jpg', 'JPEG', '.PNG'] = ['jpg', 'jpeg', 'png']
C'est plus pratique pour créer des formulaires dynamiquement car l'attribut "accept" des champs de type file, demande d'indiquer les extensions précédées d'un point.

4/ Modification du setTimeout qui sépare l'envoi de requêtes ajax.
Un setTimeout est utilisé pour espacer les requêtes ajax afin d'éviter de saturer un serveur local. Il n'était précédemment pas appliqué entre deux fichiers mais uniquement pour les gros fichiers qui nécessitent plusieurs requêtes ajax pour un chargement complet. C'est corrigé pour le principe. Par ailleurs j'ai passé la valeur du délai - option de configuration config.ajaxTimeOut - à 250 millisecondes par défaut contre 500 précédemment.

Classes PHP

Ajout

Ajout d'une méthode surchargeMessages
La classe SetMessages propose maintenant une méthode surchargeMessages, pratique pour traduire des messages à la volée sans avoir besoin de modifier la classe Messages. Cette méthode est détaillée dans ce nouveau paragraphe du mode d'emploi qui décrit la gestion des messages côté serveur.

Correction

Correction de la classe serveur UploadAjaxABCIServeur.php. Il était impossible de télécharger des fichiers supérieurs à 2 Go si l'on utilisait une version php < 7. La faute à intval(), introduit depuis la version 5.0 de cette classe et qui renvoyait n'importe quoi pour ces grands nombres, ce qui a été corrigé avec php7. Pour être complet, le bug se produirait certainement avec php >= 7 et un système d'exploitation 32bits, mais je ne suis pas en mesure de tester ce cas de figure improbable de nos jours.

Ceux qui ont une version >= 5.0 et < 7.0 de ce module d'upload, ne pourront pas appliquer cette mise à jour de façon transparente car certaines propriétés ont été renommées, je donne donc la ligne de code à remplacer dans le fichier Php_Upload/Classes/UploadAjaxABCIServeur.php :
$this->cookie_filesize = isset($cook_save[1]) ? intval($cook_save[1]) : 0;

à remplacer par
$this->cookie_filesize = isset($cook_save[1]) && is_numeric($cook_save[1]) ? $cook_save[1] : 0;

Améliorations

La méthode verifExtensions accepte maintenant un tableau d'extensions précédées ou non d'un point, par analogie avec la modification des options javascript correspondantes citées plus haut.

Exemples fournis

Améliorations

1/ Les exemples customisés UploadAjaxABCI_Custom.php et UploadAjaxABCI_Custom_VerifFileExist.php ont été revus et simplifiés. Par ailleurs, le second cité qui vérifie les fichiers existants sur le serveur avant l'upload, propose maintenant une option sous forme d'une case à cocher dans le formulaire, qui permet d'écraser les fichiers existants en connaissance de cause.

J'ai également ajouté des symboles graphiques dans les codes couleur (rouge, orange, vert) qui symbolisaient l'échec, l'existence d'une sauvegarde, ou le succès du téléchargement des fichiers dans ces formulaires, pour être compréhensible par ceux qui ont des problèmes visuels (daltoniens).

2/ L'exemple UploadAjaxABCI_Redimensions_Album.php de création d'album photo a également été amélioré.

3/ Suppression des commentaires et exemples de code qui proposaient de configurer l'option javascript config.imgPreviewUseFileReader à true pour la création des vignettes de prévisualisation des images avec le navigateur Firefox. L'équipe Mozilla a corrigé ce bug aléatoire qui se produisait (parfois oui, parfois non) avec ce navigateur quand on utilise l'objet createObjectURL() pour la prévisualisation des images, ce qui est le cas par défaut pour la classe Javascript.

4/ Tous les exemples ont été vérifiés avec le validateur w3c et sont maintenant valides html5.
Certains exemples, UploadAjaxABCI_Champs_Sup_Notation.php ainsi que UploadAjaxABCI_Crop_multiple.php et UploadAjaxABCI_Crop_multiple_multiple.php avaient une ou deux petites erreurs dans la déclaration des styles mais qui n'étaient pas visibles à l'affichage.

Par habitude, je spécifiais aussi le type "text/css" dans la balise style dans presque tous les fichiers et le code javascript était parfois placé après la balise body, ce qui renvoyait respectivement un warning et une erreur de la part du validateur w3c. Ce n'était pas problématique mais c'est corrigé pour le principe.

Mode d'emploi

Le mode d'emploi a été revu, marginalement corrigé, principalement complété notamment pour la partie serveur. Ce mode d'emploi disponible en ligne, est équivalent au fichier index.html du dossier complet proposé en téléchargement.

Voilà

Petit récapitulatif :

1/ Pour ceux qui utilisent une version >= 7.0 de ce module d'upload : il est conseillé de faire une mise à jour vers la version 7.4. Cependant, cela ne vous apportera une amélioration sensible que si le formulaire installé propose la fonctionnalité "arrêter tout" qui produira un affichage erroné en cas d'utilisation de cette fonction en cours d'upload après le téléchargement réussi d'un premier fichier dans un upload multiple, ou si vous utiliser une version de php inférieure à la version 7.0 et que vous souhaitez télécharger des fichiers supérieurs à 2 Go.

2/ Pour ceux qui utilisent une version >= 5.0 et < 7.0 de ce module d'upload, et qui utilisent une version de php inférieure à version 7.0, et qui souhaitent pouvoir télécharger des fichiers supérieurs à 2 Go, voir le correctif de la classe php.

Pour les nouveaux développements, utilisez de préférence la version 7.4.

ABCIWEB

Expert éminent sénior

Le 01/12/2020 à 2:41

Salut,

Pour info j'ai refais une petite mise à jour le 30/11/2020 quelques jours après la précédente mise à jour - version 7.6 - après m'être aperçu que le cookie qui sauvegardait les préférences du menu du mode d'emploi (fichier index.html) ne fonctionnait plus. C'est corrigé. Par la même occasion, j'ai fait en sorte qu'un clic sur les liens internes du mode d'emploi qui ne correspondent pas à un lien du menu, provoque le surlignement du paragraphe parent dans le menu, cela permet de mieux les situer. Quelques points du chapitre "Debug" ont également été reprécisés.

Le code des classes Php et Javascript d'uplod est inchangé, cette petite mise à jour ne concerne que le mode d'emploi, aussi j'ai gardé le même numéro de version 7.6. Cela dit, le fichier "index.html" du mode d'emploi fait maintenant appel au script "MenuFixedABCI.js" inclus dans le dossier "Javascript", il faudra donc également mettre à jour ce dossier en y intégrant ce script si vous faites une mise à jour partielle uniquement pour le mode d'emploi.

Commenter Signaler un problème

Identifiez-vous

Créer un compte

Tutoriel pour outil d'upload AJAX-PHP prêt à l'emploi Par Alain Bontemps

Tutoriel pour outil d'upload AJAX-PHP prêt à l'emploi

Par Alain Bontemps