Upload Ajax jQuery, informations temps réel, fonctions et styles événementiels, crop et redimensions d'images, reprise d'upload.

Présentation
UploadAjaxABCI v7.2cc
Classe d'upload Javascript / jQuery / Html5

Copyright (c) 20014-2018 Alain Bontemps (abciweb.net)
Licensed under the mit license (https://opensource.org/licenses/MIT)

Module complet prêt à l'emploi avec classes Php côté serveur, et plusieurs exemples de formulaires customisés et finalisés.

- Surpasse les limitations serveur "upload_max_filesize", "post_max_size" et "max_file_uploads".

- 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.

- Customisation des boutons de sélections avec comportements drag and drop et/ou onclick.

- Retours d'informations en temps réel personnalisable et très souple :
De nombreuses informations sont disponibles durant l'upload : nom, taille, vignette de prévisualisation (si c'est une image), progression graphique, sauvegarde effectuée, temps restant estimé, status (en cours, erreur, ok, arrêt), etc. ainsi que deux commandes : "arrêter" et "arrêter-tout" qui permettent l'arrêt optimisé afin de pouvoir effectuer une éventuelle reprise d'upload dans les meilleures conditions.

Aucune modification du code javascript n'est nécessaire pour faire afficher les informations: des classes css prédéfinies sont proposées pour afficher l'information en temps réel dans l'élément html de votre choix.

Si besoin pour rendre le formulaire plus dynamique, des styles css événementiels sont disponibles pour gérer l'affichage en fonction du retour des événements en temps réel.

L'intérêt du système est de pouvoir facilement personnaliser l'affichage en configurant simplement des éléments html, sans besoin de créer du code javascript (utilisation recommandée pour les débutants).

Pour des besoins plus avancés, la classe dispose également de fonctions javascript événementielles (callbacks) mises en application dans plusieurs exemples.

Une quinzaine d'exemples tous fonctionnels sont fournis dans le dossier en téléchargement : Création d'album photo, Crop + Upload, Notation de fichiers, Formulaire d'inscription avec avatar, Redimensionnements d'images, etc.

Notes :
- Ce module d'upload Ajax convient pour l'upload de tous les fichiers. Les plus petits seront téléchargés de manière classique tout en bénéficiant des informations disponibles en temps réel. Vous pouvez donc l'utiliser dans tous les cas, avec l'avantage qu'il n'y a pas de limite de taille ni de nombre (exceptées celles définies par vous-même) et que les gros fichiers disposeront automatiquement d'une sauvegarde permettant de compléter un téléchargement éventuellement interrompu.

- Côté serveur, des classes php sont fournies qui permettent en option de contrôler les extensions, renommer les fichiers en cas de doublons sur le serveur, recadrer et redimensionner des images, valider les champs d'un formulaire, gérer les erreurs fatales du serveur, etc.

Nos ressources disponibles
- Tutoriel du module d'upload ajax/php
Téléchargement
Télécharger Classes Javascript + Classes Php + Dossier de test prêt à l'emploi - v7.2cc
Compatibilité
Android iOS Linux Mac Windows Windows Phone
13  0 
Téléchargé 1573 fois Voir les 198 commentaires
Alerter les modérateurs




Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 28/08/2014 à 19:32
Bonjour,

La classe javascript est maintenant proposée en version 1.5.

1/ Ajout des commandes :
- arrêter
- arrêter tout
Ces commandes sont optimisées afin de pouvoir effectuer (éventuellement) une reprise d'upload ultérieure dans les meilleures conditions possibles.

2/ Les styles événementiels suivants ont été ajoutés :
- arrêter
- sauvegarde existante pour au moins un fichier en fin de traitement
- fin de traitement du formulaire

3/ La classe récupère et envoie maintenant tous les champs du formulaire (uniquement les input de type file auparavant). Une option de configuration est disponible pour interdire l'envoi du formulaire en absence de fichiers.

4/ Le script php a été légèrement modifié.

Le fichier d'exemples est plus complet (reprend les commandes ci-dessus) et mieux documenté.
Le mode d'emploi a été mis à jour

Lien de téléchargement ici
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 09/09/2014 à 20:23
Bonjour,

La classe javascript est maintenant proposée en version 1.6

- Ajout de l'information "pourcentage" (du téléchargement effectué).

- Le style événementiel "fin de traitement du formulaire" peut être maintenant utilisé même si l'on souhaite ne pas envoyer le formulaire en absence de fichiers joints.

- Correction d'un bug si l'on choisissait l'option d'afficher la boite de confirmation javascript pour la reprise d'un téléchargement.

- Légère optimisation du code par ailleurs (et trois variables globales qui s'étaient insidieusement infiltrées ont été repérées et éliminées sans pitié).

Tous les fichiers ont été mis à jour dont le mode d'emploi et le fichier d'exemples une nouvelle fois amélioré

Téléchargement ici
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 09/10/2014 à 4:12
Bonjour,

Grosse mise à jour pour cette nouvelle version 1.7

- Les fichiers sont désormais listés dès leur sélection avant d'être téléchargés.

- Les noms des input de type file sont maintenant passés côté serveur ce qui permet des destinations différentes pour les fichiers dans le cas de formulaires contenant plusieurs champs de téléchargement.

- Une classe php a été créée pour faciliter le téléchargement et le contrôle/renommage/destination/... des fichiers côté serveur.
Des fonctions de bases sont disponibles comme la vérification des extensions, le renommage des fichiers en cas de doublon avec des fichiers du serveur ainsi que des fonctions pour renvoyer des messages vers les blocs d'informations du status des fichiers et vers le bloc d'information général du formulaire.

Le script "UploadAjaxABCI_PhpLoad.php" est abondamment commenté pour donner des exemples.

Tous les fichiers et le mode d'emploi ont été mis à jour

Téléchargement ici
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 09/10/2014 à 21:59
Version 1.8

- Correction d'un bug de la version 1.7 qui pouvait se produire dans certaines circonstances lors de l'arrêt volontaire du téléchargement d'un fichier (arrêtait le téléchargement du fichier mais aussi le script)

- Modification du comportement de l'affichage du temps restant qui reprend désormais ses valeurs initiales en cas d'arrêt volontaire d'un téléchargement.

Téléchargement ici
Avatar de jpaulweb jpaulweb - Futur Membre du Club https://www.developpez.com
le 10/10/2014 à 13:48
Bonjour,
Tout d'abord barvo et merci pour ce magnifique travail! C'est vraiment bien pensé et fini...

Je cherchait comment et où intégré ma fonction de redimensionnement... Car il me retourne une erreur...
Fonction pour redimensionner:
Code : 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
43
44
45
46
47
	function Redimensionner($fichier, $new_width, $new_height){
 
  	$file_src = $fichier; 
	$file_dest =$fichier;
	//$new_width = 1000;
	//$new_height = 1000;
	$proportional=true;
 
		$file_src_infos=pathinfo($file_src);
 
		$attr=getimagesize($file_src);
		$fw=$attr[0]/$new_width;
		$fh=$attr[1]/$new_height;
 
		$ext=strtolower($file_src_infos['extension']);
		if(($ext=="jpg" or $ext=="png" or $ext=="JPG" or $ext=="PNG") and  ($attr[0]>$new_width or $attr[1]>$new_height))
		{
 
		if($proportional)
			$f=$fw>$fh?$fw:$fh;
		else
			$f=$fw>$fh?$fh:$fw;
 
		$w=$attr[0]/$f;
		$h=$attr[1]/$f;
 
		if($ext=="jpg") $ext="jpeg";
 
		$func="imagecreatefrom".$ext; $src  = $func($file_src);
 
		$x=0; $y=0;
		if($proportional) $dest = imagecreatetruecolor($w,$h);
		else {
			$dest = imagecreatetruecolor($new_width,$new_height);
			$x=($new_width-$w)/2; $y=($new_height-$h)/2; }
 
		imagealphablending($dest,false);
 		imagesavealpha($dest,true);
		imagecopyresampled($dest,$src,$x,$y,0,0,$w,$h,$attr[0],$attr[1]);
 
		$func="image".$ext;
		$func($dest, $file_dest);
		imagedestroy($dest);
		exit(json_encode(array('resultat' => 'Image redimentionnée.')));
		}
 
	}
Lieu où je l'ai placée :
Code : 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
	if(!$UpAbci_blob_slice) // s'il est d'un seul morceau
	{
		if(@move_uploaded_file($_FILES['UpAbci_fragment']['tmp_name'], $destination_fichier))
		{
		Redimensionner($UpAbci_fichier_nom_final,'1000', '1000');
		exit(json_encode(array('resultat' => 'upload_ok')));// ne pas modifier -> commande ajax
				// Si OK on redimentionne 1000x1000 max.
		}
		else
		exit(json_encode(array('erreur' => 'Erreur de transfert du fichier téléchargé.')));
	}
	else
	{
		 // On ouvre ou on crée le fichier
		$fichier_cible = @fopen($temp_adresse, 'a+');
		if($fichier_cible === false) exit(json_encode(array('erreur' => 'Erreur d\'ouverture du fichier temporaire.')));
		
		// On ouvre le contenu téléchargé
		$upload_file = @fopen($_FILES['UpAbci_fragment']['tmp_name'], 'rb');
		if($upload_file === false) exit(json_encode(array('erreur' => 'Erreur d\'ouverture du contenu téléchargé.')));
		
		// On lit son contenu dans une variable
		$upload_size = $_FILES['UpAbci_fragment']['size'];
		$upload_content = @fread($upload_file, $upload_size);
		if($upload_content === false) exit(json_encode(array('erreur' => 'Erreur de lecture du contenu téléchargé.')));
		fclose($upload_file);
		
		// On l'écrit dans le fichier temporaire
		if(@fwrite($fichier_cible, $upload_content) === false) exit(json_encode(array('erreur' => 'Erreur d\'écriture du contenu téléchargé.')));
		unset($upload_content);
		
		fclose($fichier_cible);
		
		$new_file_size = $cook_save_size + $upload_size;
				
		setcookie($cookie_name,rawurlencode($temp_adresse.'|'.$new_file_size),$time_cook_save,$path_cook_save);

		if (!$UpAbci_fichier_fin) exit(json_encode(array('resultat' => 'continu')));// ne pas modifier -> commande ajax
	}


	if ($UpAbci_fichier_fin && $UpAbci_blob_slice) 
	{
		// vérification de l'intégrité du fichier
		if ($verif_filesize_sup2Go_Ok || $UpAbci_fichier_size < 2147483648)
		{
			$size_upload = @filesize($temp_adresse);
			
			if($size_upload != $UpAbci_fichier_size)
			{
				setcookie($cookie_name,"",time()-3600,$path_cook_save);
				exit(json_encode(array('erreur' => 'Erreurs possibles : la sauvegarde utilisée a été enregistrée lors d\'un instant critique, ou vous avez téléchargé simultanément deux fichiers identiques.')));
			}
		}
		
		if(@rename($temp_adresse,$destination_fichier)) 
		{
			setcookie($cookie_name,"",time()-3600,$path_cook_save);
		// Si OK on redimensionne 1000x1000 max.
		Redimensionner($UpAbci_fichier_nom_final,1000, 1000);
			exit(json_encode(array('resultat' => 'upload_ok')));// ne pas modifier -> commande ajax
		

		}
Un tout grand merci
JPaul
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 10/10/2014 à 15:03
Salut,

Attention dans ta fonction "Redimensionner" tu utilises exit(json_encode(array('resultat' => 'Image redimentionnée.'))); or l'index 'resultat' est réservé comme commande ajax. Si tu veux ajouter des informations dans la ligne de résultat du fichier inspires-toi de la fonction "addStatusOkAjax" (de la classe php) qui fait un merge de la réponse serveur utile à la requête ajax et de ton information personnalisée qui s'ajoutera au status ok du fichier.

Quelques remarques :

- Si c'est pour faire du redimensionnement d'images côté serveur j'ai fais cette autre classe d'upload et redimensionnement. Elle est simple à utiliser et toutes les fonctions de redimensionnement sont déjà faites avec de très nombreuses options. Elle n'autorise pas le dépassement de la configuration serveur "upload_max_filesize" mais c'est un moindre mal dans le sens où la plupart du temps cette valeur (64 Mo chez ovh mutualisé par exemple) est largement suffisante pour uploader des images sans avoir à les découper. Et en cas de dépassement quelconque la gestion des erreurs quasiment complète permet d'avertir clairement l'utilisateur du problème rencontré.
C'est un peu pour cette raison que je n'ai pas encore proposé de module d'interaction entre les deux classes : quand il s'agit d'images et de redimensionnement côté serveur, la classe purement php suffit dans la plupart des cas et elle est prévue pour cela. La classe javascript de ce sujet quant à elle est surtout utile pour les plus gros fichiers mais bien entendu on peut en charger des plus petits...
Une autre piste serait de faire le redimensionnement en javascript en utilisant les canvas html5 qui donnent une meilleure qualité que la bibliothèque GD de php. Mais le travail étant fait sur le navigateur du visiteur cela peut poser des problèmes de compatibilité surtout concernant la puissance de l'appareil utilisé.

Enfin donc si c'est pour redimensionner des images en php regardes plutôt le lien vers cette classe dédiée
Avatar de jpaulweb jpaulweb - Futur Membre du Club https://www.developpez.com
le 10/10/2014 à 17:08
Re,
J'avais déjà essayé ton autre classe consacrée à l'uplaod des images (très bien détaillée), mais j'aimais bien ta présentation de téléchargement des fichiers et j'essaye donc de combiner les 2.
B à t
JPAul
Avatar de Clenzo Clenzo - Futur Membre du Club https://www.developpez.com
le 10/10/2014 à 21:25
Merci bien chef pour cette mise à jour.
Agréable soirée à toi!!
Avatar de ABCIWEB ABCIWEB - Expert éminent https://www.developpez.com
le 15/10/2014 à 21:09
Bonjour,

Nouvelle version 1.9 en ligne

A/ Améliorations

1/ La classe serveur php a été mise à jour :

- Permet de modifier plus facilement les fichiers téléchargés complets avant leur déplacement vers leur emplacement définitif. Des exemples sont donnés avec notamment une fonction de renommage de fichier et une fonction de redimensionnement d'images.

- Meilleur gestion des erreurs en cas de fichiers temporaires non valides ou corrompus.

2/ La classe ajax a été mise à jour :

- Le status "téléchargement partiel" (qui indiquait une sauvegarde disponible) a été supprimé car il pouvait prêter à confusion en étant prioritaire sur le status "erreur serveur". C'était initialement prévu pour pouvoir afficher le maximum d'informations avec un minimum d'éléments html, mais après de multiples tests ce n'était pas pertinent dans tous les cas (suivant le type d'erreur). Comme par ailleurs une classe spécifique ainsi que des styles événementiels sont réservés à l'affichage de la sauvegarde disponible, autant afficher les deux informations séparément. L'affichage est maintenant cohérent dans tous les cas.

3/ Exemples de formulaires de téléchargement

- Les exemples du fichier de test "UploadAjaxABCI.php" ont été complétés et la présentation est plus élaborée.

B/ Corrections

1/ Classe ajax toutes versions
Le temps restant n'était pas correctement renseigné en cas d'utilisation de la boite de confirmation javascript de reprise d'upload si l'on choisissait de réinitialiser le téléchargement en cliquant sur "annuler".

2/ Classe ajax versions 1.7 et 1.8
Les boutons de sélection de fichiers effacent maintenant les fichiers précédemment sélectionnés sur le comportement "onclick", (uniquement sur "onchange" auparavant) ce qui permet de refaire exactement la même sélection après un arrêt de tous les fichiers sans avoir besoin d'envoyer le formulaire ou de rafraichir la page. Fonctionnait néanmoins correctement sous Firefox, mais pas sous Chrome et IE. Ce disfonctionnement a pu être corrigé sous Chrome mais pas sous IE10 qui ne permet pas de modifier (même simplement de réinitialiser) les champs de type file. Je n'ai pas fait de correctif pour ce navigateur (et ceux qui ont le même problème) car ce cas de figure est somme toute très marginal et il reste toujours la possibilité de rafraîchir la page.

3/ Classe php serveur versions 1.7 et 1.8 IMPORTANT
La sauvegarde partielle de fichiers avec des noms incluant des caractères spéciaux sur l'ordinateur du visiteur n'était pas possible. Dans ce cas, seul le téléchargement de fichiers inférieurs à la taille d'un fragment (8Mo par défaut) était possible.

4/ Mode d'emploi versions 1.7 et 1.8
La deuxième note du chapitre "ordre d'application des styles" du mode d'emploi était erronée.

Tous les fichiers et le mode d'emploi ont été mis à jour
Lien de téléchargement
Consultez l'ensemble des 198 commentaires et la nouvelle actualité sur le même sujet  Poster une réponse Signaler un problème
 
Developpez.com décline toute responsabilité quant à l'utilisation des différents éléments téléchargés.
Contacter le responsable de la rubrique JavaScript