[RESOLU] Charger une image après upload, sans recharger la page

Eléphant du PHP | 292 Messages

30 oct. 2019, 17:14

Bonjour à tous,

Je travaille sur un script d'upload de fichier, format pdf ou jpg, avec création au passage d'un aperçu (en utilisant Imagick).
Le tout se fait par php/Ajax, sans recharger la page.

Tout fonctionne à merveille, sauf que lorsque je veux faire apparaître l'aperçu, celui-ci ne s'affiche pas (puisque, je suppose, l'image n'a pas été chargée par le navigateur). Il faut recharger la page, et là c'est bon.

J'utilise UploadAjaxABCI, qui me permet de faire des actions après le succès de l'upload, et j'ai essayé, entre autres, ce qui suit :

Code : Tout sélectionner

// Cette partie fonctionne très bien... var form = new UploadAjaxABCI(destination_ajax, '#form', '#reponse'); form.config.filesExtensions = ['jpg','jpeg','pdf']; form.config.customFileSelect = '.BTN_CHARGER'; $(function() { form.Start() }); // Et ici je dois pouvoir indiquer du code qui agira après l'upload form.config.func_FileEndEach = function(objet, info_serveur, mixte_serveur) { if(mixte_serveur != 'undefined') { // Ça, ça ne fonctionne pas ! var img = new Image(); $(img).load(function() { img.src = 'ici_l_url_de_l_apercu.jpg'; }); // Le popup fonctionne avec un autre script, et s'ouvre bien $('#POPUP_APERCU').html("<img src='ici_l_url_de_l_apercu.jpg'>"); // Là j'échange le bloc dans lequel se trouve le formulaire d'upload // avec celui dans lequel se trouve le bouton d'aperçu (et ça aussi ça fonctionne) $('#BLOC_UPLOAD').hide(); $('#BLOC_APERCU').show(); } };



J'ai essayé divers trucs trouvés à gauche et à droite sur le web, mais je n'y arrive pas. Quelqu'un a-t-il une piste ?

Merci pour votre aide !

Mammouth du PHP | 1249 Messages

30 oct. 2019, 18:29

$("#myimage").attr('src','img url');
pour changer l'url de l'image qui a comme id myimage

Eléphant du PHP | 292 Messages

30 oct. 2019, 19:29

Merci pour la réponse !

Ça fonctionne, comme pour d'autres trucs que j'ai essayé (la méthode html() notamment) mais ça ne charge pas l'image, qui apparaît donc comme si elle était manquante, tant que la page n'a pas été rechargée.

Eléphant du PHP | 292 Messages

07 nov. 2019, 14:39

Rebonjour à tous,

Je suis toujours coincé sur le même problème... J'ai trouvé un peu partout sur le net le code suivant :

Code : Tout sélectionner

var image = new Image(); image.src = 'chemin-de-l-image';

...qui est censé charger une image via javascript. Mais ça ne fonctionne pas :roll:

J'ai dû rater une info ?

Avatar du membre
Mammouth du PHP | 979 Messages

07 nov. 2019, 15:40

Salut, je vois pas trop l'utilité du code avec var img vu que tu ne t'en sers pas dessous.

Je ne connais pas la librairie mais le principe c'est qu'à chaque fichier uploadé le script "destination_ajax" est appelé. C'est lui qui enregistre l'image et il devrait donc logiquement retourner l'adresse du fichier uploadé qui devrait être récupérable via un des trois paramètres de la fonction form.config.func_FileEndEach.

La tu as mis une adresse en dur "ici_l_url_de_l_apercu.jpg" ce qui n'est pas du tout logique.
J'édite souvent mon message après avoir répondu pour le corriger où y apporter des informations complémentaires alors n'hésitez pas à y jeter un nouveau coup d'oeil ^^

Eléphant du PHP | 292 Messages

10 nov. 2019, 01:44

En fait je procède à l'upload de l'image par un fichier .php externe, appelé par Ajax, dans lequel j'ai (entre autre) ce morceau de code :

Code : Tout sélectionner

if($up->getTransfertOk()) { // Récupération des variables id_panier et recto-verso $id_panier = strval($_POST['id_panier']); $cote = $_POST['cote']; $extension_fichier = strtolower(pathinfo($destination_fichier, PATHINFO_EXTENSION)); if($extension_fichier == "jpeg") $extension_fichier = "jpg"; $new_name = $dossier_destination.$_SESSION['code_cmd']."_".$_SESSION['id_user']."_".$id_panier."_".$cote.".".$extension_fichier; rename($destination_fichier, $new_name); // Création de l'aperçu avec IMAGICK $nom_fichier = $dossier_destination.$_SESSION['code_cmd']."_".$_SESSION['id_user']."_".$id_panier."_".$cote; if($extension_fichier == "pdf") $cmd = "convert '".$nom_fichier.".pdf[0]'"; else if($extension_fichier == "jpg") $cmd = "convert '".$nom_fichier.".jpg'"; $cmd .= " -thumbnail 400 -quality '75' -background white -flatten label:'APERÇU' \ "; $cmd .= " -background white -gravity center -append"; $cmd .= " '".$nom_fichier."_apercu.jpg'"; exec($cmd); }
Donc quand l'upload est ok, la création de l'aperçu se fait grâce à Imagick, et ça ça roule, pas de problème.

Le problème vient, me semble-t-il, du fait que l'upload de l'image se fait par Ajax, et que ma page principale ne se recharge pas. Du coup l'aperçu existe, mais n'a pas été chargé par le navigateur, ce qui fait qu'il apparaît comme lien manquant. Et dès que j'ai rechargé la page, alors là pas de problème, l'aperçu apparaît bien puisqu'il a été chargé.

L'idée c'est donc d'avoir quelques lignes de codes qui permettent de forcer le chargement de l'image dans le cache du navigateur, sans être obligé de recharger la page. Est-ce seulement possible d'ailleurs ?

Eléphant du PHP | 163 Messages

13 nov. 2019, 00:11

Il est tout à fait possible de charger une image sans recharger la page

Or 1 t'as déjà donné la solution.
$("#myimage").attr('src','img url');
pour changer l'url de l'image qui a comme id myimage
Une fois ta requête ajax terminée tu n'as plus qu'a appliquer la solution de or 1 en spécifiant la bonne url.

Un exemple à adapter avec ton appel Ajax
Cordialement
Naroth

Eléphant du PHP | 292 Messages

15 nov. 2019, 15:21

Merci à tous pour vos réponses, le problème est réglé. Je m'étais gouré connement dans mes noms de fichiers, d'où l'incompréhension :roll: