Een voorbeeld van een afbeelding bekijken voordat deze wordt geüpload

Ik wil een voorbeeld van een bestand (afbeelding) kunnen bekijken voordat het wordt geupload. De preview-actie moet helemaal in de browser worden uitgevoerd zonder Ajax te gebruiken om de afbeelding te uploaden.

Hoe kan ik dit doen?

Justin
Bewerkte vraag 6de1 september 2011 в 10:49
Programmering
file-upload javascript jquery
16de3 december 2010 в 9:51
24 views
Oplossing

Kijk eens naar de voorbeeldcode hieronder:

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

U kunt ook [dit voorbeeld hier proberen](http://jsfiddle.net/LvsYc/).

dgknca
Bewerkt antwoord 7de4 juni 2019 в 10:57
Commentaren (13)

Het antwoord van LeassTaTT werkt goed in "standard" browsers zoals FF en Chrome. De oplossing voor IE bestaat, maar ziet er anders uit. Hier beschrijving van cross-browser oplossing:

In HTML hebben we twee preview elementen nodig, img voor standaard browsers en div voor IE

HTML:



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

In CSS specificeren we het volgende IE-specifieke ding:

CSS:

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

In HTML nemen we de standaard en de IE-specifieke Javascripts op:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Bewerkt antwoord 14de4 augustus 2015 в 11:30
Commentaren (0)

Wat dacht je van een functie die het bestand laadt en een aangepaste gebeurtenis afvuurt. Koppel dan een luisteraar aan de invoer. Op deze manier hebben we meer flexibiliteit om het bestand te gebruiken, niet alleen voor het bekijken van afbeeldingen.

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

Waarschijnlijk is mijn code'niet zo goed als die van sommige gebruikers, maar ik denk dat je het punt wel snapt. Hier zie je een [voorbeeld][1]

ajorquera
Bewerkt antwoord 21ste4 maart 2014 в 1:28
Commentaren (0)