come vedere anteprime delle foto prima di mandarli al server

smartjob

Nuovo Utente
27 Mag 2019
1
0
1
ho un form con 1 input file e vorrei caricare alcune foto e guardare in anteprima sulla stessa pagina prima di mandarle al server, esempio se carico 2 foto 1 ad 1 voglio vederle tutte 2 a fianco del altra senza sostituire una dal altra, ho gia provato a recuperare il value del input file x poi caricarle su un anchor ma come value ottengo un path strano che comincia con fakepath e nn serve
 
Ciao guarda puoi risolvere in questo modo:

JavaScript:
//con la costante image definisci l'input
const image = document.querySelector("#input");
//aggiungi un listener che si attiva quando viene selezionata l'immagine
image_input.addEventListener("change", function() {
    //con il FileReader recuperi l'immagine
    const reader = new FileReader();   
    reader.addEventListener("load", () => {   
        const uploaded_image = reader.result;
        //modifica l'id_contenitore per visualizzare l'immagine nella tua pagina
        document.querySelector("#id_contenitore").style.backgroundImage = `url(${uploaded_image})`;
    });   
    reader.readAsDataURL(this.files[0]);
});
 

Discussioni simili