Bonjour à tous

J'ai un module de téléchargement des images transmis par les users. Tout marche bien sauf la partie d'affichage avant l'envoi des images. Mon souci est

une fois l'image affichée (disons toto.jpg), l'utilisateur peut le supprimer pour ajouter une autre image, mais jamais le même à savoir toto.jpg et pourtant

je supprime le blob et son canva associé.  Voilà un bout de code coté utilisateur

<style>
.ShowBox {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}
.ImgDiv {
    position: relative;
    margin: 10px;
}
.ImgDiv img {
    width: 13vw;
    height: 18vh;
    border: 1px solid #ccc;
    border-radius: 4px;
}
</style>

<div class="FlexDiv">
 <div>
  <label class="Pointer">
   <input type="file" id="fileInput" name="image" class="Off" multiple accept="image/*" onchange="viewImg(1, this)">
   <p id="n1">votre image</p>
  </label>
 </div>
</div>

function viewImg(index, input)
{
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    let ImgName =  url.replace("C:\\fakepath\\", "")
    document.getElementById("n1").innerHTML = ImgName;

    if (input.files && input.files[0]&& (ext=="gif"||ext =="png"||ext =="jpeg"||ext=="jpg"))
    {
        const imgCase = document.createElement('li');
        imgCase.className = 'ImgDiv';
        const img = document.createElement('img');
        img.src = URL.createObjectURL(input.files[0]); // blob
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'X';
        deleteButton.className = 'delete-button';
        deleteButton.addEventListener('click', function() {
            imgCase.remove(); // Supprimer l'élément de la liste
            URL.revokeObjectURL(img.src); // Libérer la mémoire liée à l'URL de l'image
            document.getElementById("n1").innerHTML = "votre image";

        });
        imgCase.appendChild(img);
        s1.appendChild(imgCase);
        imgCase.appendChild(deleteButton);
        return false
    }
}

   Si maintenant, je supprime une image avoir l'avoir affiché, je peux l'afficher à nouveau si au préalable, je recharge ma      page. Ce qui m'a donné l'idée de rafrechir que mon div mais sans succès

function RefreshDiv(divx) 
{
    $("#s1").load(" #s1 > *");
}

Merci pour vos idée et vos aides sans passer par PHP

-
Edité par MariamDomma 17 décembre 2024 à 10:45:54

Bonjour

J'ai essayé sans succès. En fait, d'après ce que j'ai lu, ce que le blob est un pointeur vers l'image, et faut trouver le moyen de désactiver ce pointer

imgCase.remove(); // Supprimer l'élément de la liste
URL.revokeObjectURL(img.src); // Libérer la mémoire liée à l'URL de l'image