Come vedere in anteprima le foto caricate nel input file prima di mandarle al server

di Anonimizzato20793 il
4 risposte
/
Anonimizzato20793
Utente anonimizzato
Vorrei poter avere un anteprima in miniatura delle foto che carico sul input file ma non trovo il modo, ho provato a recuperare il value del input file x poi inserirlo dentro un src di un anchor ma la path non e quella della foto ma una path che comincia con fakepath, e quindi non funziona, il progetto trattasi di un marketplace del usato con vari filtri, di vestiti e di scarpe, se volete continuare il progetto vi lascio qui il codice sorgente

4 Risposte

  • Avatar di Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi
    3504

    supremo ha scritto:

    Vorrei poter avere un anteprima in miniatura delle foto che carico sul input file ma non trovo il modo, ho provato a recuperare il value del input file x poi inserirlo dentro un src di un anchor ma la path non e quella della foto ma una path che comincia con fakepath, e quindi non funziona
    Non puoi caricare una immagine pensando di utilizzare il percorso fisico della stessa sul file system dell'utente da browser: sarebbe un buco di sicurezza clamoroso.

    Ciò che puoi fare è utilizzare le API JavaScript giuste per ottenere informazioni relative ai dati del file (una immagine, in questo caso) trascinato o caricato nel controllo di upload.

    Dai un'occhiata a questo esempio preso da StackOverflow e all'uso della : 
    
imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>
    Ciao!
  • /
    Anonimizzato20793
    Utente anonimizzato

    Alka ha scritto:

    supremo ha scritto:

    Vorrei poter avere un anteprima in miniatura delle foto che carico sul input file ma non trovo il modo, ho provato a recuperare il value del input file x poi inserirlo dentro un src di un anchor ma la path non e quella della foto ma una path che comincia con fakepath, e quindi non funziona
    Non puoi caricare una immagine pensando di utilizzare il percorso fisico della stessa sul file system dell'utente da browser: sarebbe un buco di sicurezza clamoroso.

    Ciò che puoi fare è utilizzare le API JavaScript giuste per ottenere informazioni relative ai dati del file (una immagine, in questo caso) trascinato o caricato nel controllo di upload.

    Dai un'occhiata a questo esempio preso da StackOverflow e all'uso della : 
    
imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>
    Ciao!
    Ok grz a quanto pare input file ha 1 evento di tipo change, comunque non ho capito perche introduci la parola event dentro lo stesso tipo di evento e come funziona la funzione url create, e non so quale sarebbe il clamoroso problema di sicurezza
  • Avatar di ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi
    79
    Come già detto da Alka, URL.createObjectURL() è il giusto approccio per trattare la risoluzione del tuo problema in quando specifico per un discorso front-end. Al contrario dell'oggetto FileReader(), in URL.createObjectURL() bisogna ricordarsi di pulire la memoria occupata con il metodo URL.revokeObjectURL().
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-prev {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
        }

        .img-prev img {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .img-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 5px;
            margin: 0px 1px;
            inset: 1px solid black;
            position: relative;
            top: -2px;
            background-color: lightgray;
        }

        #preview {
            display: flex;
            padding: 20px 0;
            flex-wrap: wrap;
            gap: 50px 0;
        }
    </style>
</head>

<body>
    <form enctype="multipart/form-data">
        <label for="images"></label>
        <input type="file" name="images" id="images" accept="image/*" multiple>
        <div id="preview"></div>
    </form>

    <script>
        const inputImages = document.getElementById('images')
        const preview = document.getElementById('preview')

        inputImages.addEventListener('change', previewImgs)

        function previewImgs() {
            preview.innerHTML = ''

            for (const image of inputImages.files) {

                const div = document.createElement('div')
                const newImg = document.createElement('img')
                const p = document.createElement('p')
                div.classList.add('img-prev')
                newImg.src = URL.createObjectURL(image)
                p.textContent = `${image.name}`
                p.classList.add('img-text')
                div.appendChild(newImg)
                div.appendChild(p)
                preview.appendChild(div)
                URL.revokeObjectURL(newImg.src)
            }
        }
    </script>
</body>

</html>
  • /
    Anonimizzato20793
    Utente anonimizzato

    ninja72 ha scritto:

    Come già detto da Alka, URL.createObjectURL() è il giusto approccio per trattare la risoluzione del tuo problema in quando specifico per un discorso front-end. Al contrario dell'oggetto FileReader(), in URL.createObjectURL() bisogna ricordarsi di pulire la memoria occupata con il metodo URL.revokeObjectURL().
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-prev {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
        }

        .img-prev img {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        .img-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 5px;
            margin: 0px 1px;
            inset: 1px solid black;
            position: relative;
            top: -2px;
            background-color: lightgray;
        }

        #preview {
            display: flex;
            padding: 20px 0;
            flex-wrap: wrap;
            gap: 50px 0;
        }
    </style>
</head>

<body>
    <form enctype="multipart/form-data">
        <label for="images"></label>
        <input type="file" name="images" id="images" accept="image/*" multiple>
        <div id="preview"></div>
    </form>

    <script>
        const inputImages = document.getElementById('images')
        const preview = document.getElementById('preview')

        inputImages.addEventListener('change', previewImgs)

        function previewImgs() {
            preview.innerHTML = ''

            for (const image of inputImages.files) {

                const div = document.createElement('div')
                const newImg = document.createElement('img')
                const p = document.createElement('p')
                div.classList.add('img-prev')
                newImg.src = URL.createObjectURL(image)
                p.textContent = `${image.name}`
                p.classList.add('img-text')
                div.appendChild(newImg)
                div.appendChild(p)
                preview.appendChild(div)
                URL.revokeObjectURL(newImg.src)
            }
        }
    </script>
</body>

</html>
    Che succede se non se pulisce la memoria?
Devi accedere o registrarti per scrivere nel forum
4 risposte