Comment ignorer le cache

Version imprimable

22/03/2018, 15h52
ma5t3r

Comment ignorer le cache

Bonjour à tous,
je suis confronté à un problème pour lequel je n'ai pas de solution.

J'upload un avatar via ajax et une fois l'upload terminé, j'affiche l'image dans un div prévu à cet effet.
Le problème est que l'image uploadée porte le même nom que l'image déjà présente dans le div (c'est fait exprès, j'écrase le fichier image précédent).
Sans faire de reload, j'aimerais afficher la dernière image et pas celle du cache.

Est-ce que qqun a une solution à me proposer ?

Merci de votre aide
22/03/2018, 15h59
psychadelic

t'a codé ça comment ?
en passant par un blob, ce genre de probleme ne se pose pas
22/03/2018, 16h14
ma5t3r

Salut,
La méthode appelée via ajax me renvoie l'URL de l'image.
Je n'ai pas essayé de retourner un blob.
Encoder l'image en base64, c'est ce à quoi tu penses ?
22/03/2018, 16h31
ma5t3r

Merci beaucoup pour cette piste.
ca fonctionne parfaitement.
22/03/2018, 17h02
psychadelic

je pensais pas à un encodage en base64, qui en plus prends beaucoup plus de place mémoire.

et du coup quelle solution à tu choisie ?
parce que le but ici, c'est de partager son expérience, non ?
connaitre comment tu t'y prenais avant, pour que d'autres évite d'entrer dans le même éceuil,
connaitre la solution que tu a pris, pour que d'autre puisse la pratiquer à leur tour,
et la confronter aussi au savoir des autres intervenant de ce forum, qui peuvent ainsi apporter leurs critique et idées...

Mais la tu la joue franchement perso... :(
22/03/2018, 17h18
NoSmoking

Bonjour,
une solution qui fonctionne bien également et l'ajout d'un paramètre « datetime » à l'url de l'image côté serveur

Code:

"nom-image.png??datetime=1521735444306"

hého tt le blonde !
Finalement, j'ai opté pour la solution d'encodage en base64

Code succinct côté PHP

Code:

1
2
3
4
5
    $type = pathinfo(base_url($data['url_filename']), PATHINFO_EXTENSION);
            $content = file_get_contents($data['url_filename']);
            $base64 = 'data:image/' . $type . ';base64,' . base64_encode($content);
            $data['base64'] = $base64;
            echo json_encode($data);

Code côté client

Code:

1
2
3
4
5
6
 
 $(document).ready(function() {
        $('#upload-logo').on('finish', function (event, json) {
            $('#img-logo').prop('src', json.base64);
        }).uploadFile();
    });

uploadFile est un plugin que j'ai développé qui remonte un event "finish".

Mais la solution de noSmoking me tente aussi, je vais essayer :-)

22/03/2018, 18h00
ma5t3r

Finalement, je vais opter pour la solution de noSmoking (moins gourmand)
Ca fonctionne aussi.

Merci à vous 2

Citation:

"nom-image.png??datetime=1521735444306"

Au fait, le double ? est une faute de frappe ou il y a une raison ?
22/03/2018, 18h02
NoSmoking

:oops: erreur de frappe !

Code:

1
2
3
4
5
6
fetch( ImageURL )
.then(function( resp ) { return resp.blob(); })
.then(function( myBlob ) {
    var objectURL = URL.createObjectURL(myBlob);
    $('#img-logo').prop('src', objectURL);
});