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

di
supremo
il
4 risposte
S
supremo
Utente Attivo
Iscritto da
gen, 2017
Messaggi:
112

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

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

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

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

    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!
  • S
    supremo
    Utente Attivo
    Iscritto da
    gen, 2017
    Messaggi:
    112

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

    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
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

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

    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>
  • S
    supremo
    Utente Attivo
    Iscritto da
    gen, 2017
    Messaggi:
    112

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

    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