Anteprima di un'immagine prima che venga caricata

Voglio essere in grado di vedere in anteprima un file (immagine) prima che venga caricato. L'azione di anteprima dovrebbe essere eseguita tutta nel browser senza usare Ajax per caricare l'immagine.

Come posso farlo?

Justin
Domanda modificata 6º settembre 2011 в 10:49
Programmazione
file-upload javascript jquery
16º dicembre 2010 в 9:51
23 visualizzazioni
Soluzione

Date un'occhiata al codice di esempio qui sotto:

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <input type='file' id="imgInp" />
  ![your image](#)

Inoltre, puoi [provare questo esempio qui](http://jsfiddle.net/LvsYc/).

dgknca
Risposta modificata 7º giugno 2019 в 10:57
Commentari (13)

La risposta di LeassTaTT funziona bene in "standard" browser come FF e Chrome. La soluzione per IE esiste, ma ha un aspetto diverso. Qui la descrizione della soluzione cross-browser:

In HTML abbiamo bisogno di due elementi di anteprima, img per i browser standard e div per IE

HTML:



<div id="preview_ie"></div>

Nel CSS specifichiamo la seguente cosa specifica per IE:

CSS:

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}

In HTML includiamo i Javascript standard e quelli specifici per IE:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Risposta modificata 14º agosto 2015 в 11:30
Commentari (0)

Che ne dite di creare una funzione che carica il file e spara un evento personalizzato. Poi attaccare un ascoltatore all'input. In questo modo abbiamo più flessibilità per utilizzare il file, non solo per l'anteprima delle immagini.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

Probabilmente il mio codice non è buono come quello di alcuni utenti, ma penso che ne capirete il senso. Qui potete vedere un [esempio][1]

ajorquera
Risposta modificata 21º marzo 2014 в 1:28
Commentari (0)