Få vist et billede, før det uploades

Jeg vil gerne have mulighed for at få vist en fil (billede), før den uploades. Visningshandlingen skal udføres helt i browseren uden brug af Ajax til at uploade billedet.

Hvordan kan jeg gøre dette?

Justin
Redigeret spørgsmål 2011ør september 2011 в 10:49
Programmering
file-upload javascript jquery
2010ør december 2010 в 9:51
17 visninger
Løsning

Tag et kig på nedenstående kodeeksempel:

Se venligst et eksempel på denne kode: 

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 denne prøve her] (http://jsfiddle.net/LvsYc/).

dgknca
Redigeret svar 2019ør juni 2019 в 10:57
Kommentarer (13)

Svaret på LeassTaTT fungerer godt i standardbrowsere som FF og Chrome. Løsningen til IE findes, men ser anderledes ud. Her beskrivelse af cross-browser løsning:

I HTML har vi brug for to preview-elementer, img for standardbrowsere og div for IE

HTML:



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

I CSS specificerer vi følgende IE-specifikke ting:

CSS:

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

I HTML inkluderer vi standard- og IE-specifikke Javascripts:


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

Hvad med at oprette en funktion, der indlæser filen og udløser en brugerdefineret hændelse. Derefter vedhæftes en lytter til indgangen. På denne måde har vi mere fleksibilitet til at bruge filen, ikke kun til at få vist billeder.

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

Sandsynligvis er min kode ikke så god som nogle brugere, men jeg tror du vil få pointen med det. Her kan du se et [eksempel][1]

ajorquera
Redigeret svar 2014ør marts 2014 в 1:28
Kommentarer (0)