Forhåndsvisning av et bilde før det lastes opp

Jeg vil kunne forhåndsvise en fil (bilde) før den lastes opp. Forhåndsvisningshandlingen skal utføres i nettleseren uten å bruke Ajax til å laste opp bildet.

Hvordan kan jeg gjøre dette?

Justin
Redigerte spørsmål 6. september 2011 в 10:49
Programmering
file-upload javascript jquery
16. desember 2010 в 9:51
5 visninger
Løsning

Ta en titt på eksempelkoden nedenfor:

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](#)

Du kan også [prøve dette utdraget her](http://jsfiddle.net/LvsYc/).

dgknca
Redigert svar 7. juni 2019 в 10:57
Kommentarer (13)

Svaret fra LeassTaTT fungerer godt i "standard" nettlesere som FF og Chrome. Løsningen for IE finnes, men ser annerledes ut. Her er en beskrivelse av løsningen på tvers av nettlesere:

I HTML trenger vi to forhåndsvisningselementer, img for standard nettlesere og div for IE.

HTML:



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

I CSS spesifiserer vi følgende IE-spesifikke ting:

CSS:

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

I HTML inkluderer vi standard og IE-spesifikke Javascripts:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Redigert svar 14. august 2015 в 11:30
Kommentarer (0)

Hva med å lage en funksjon som laster inn filen og utløser en egendefinert hendelse. Knytt deretter en lytter til inngangen. På denne måten har vi mer fleksibilitet til å bruke filen, ikke bare for forhåndsvisning av bilder.

/**
 * @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)

Sannsynligvis er koden min ikke så god som noen brukere, men jeg tror du vil forstå poenget med den. Her kan du se et [eksempel][1].

ajorquera
Redigert svar 21. mars 2014 в 1:28
Kommentarer (0)