Bir görüntüyü yüklemeden önce önizleme

Bir dosyayı (resim) yüklenmeden önce önizleyebilmek istiyorum. Önizleme eylemi, görüntüyü yüklemek için Ajax kullanmadan tüm tarayıcıda yürütülmelidir.

Bunu nasıl yapabilirim?

Justin
Edited question 2011ööp49öö10 Eylül 2011 в 10:49
Programlama
file-upload javascript jquery
2010ööp51öö9 Aralık 2010 в 9:51
44 görünümler
Çözüm

Lütfen aşağıdaki örnek koda bir göz atın:

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

Ayrıca, [bu örneği burada deneyebilirsiniz](http://jsfiddle.net/LvsYc/).

dgknca
Edited answer 2019ösp57ös22 Haziran 2019 в 10:57
Yorumlar (13)

LeassTaTT'ın cevabı FF ve Chrome gibi "standart" tarayıcılarda iyi çalışır. IE için çözüm var, ancak farklı görünüyor. Burada çapraz tarayıcı çözümünün açıklaması:

HTML'de iki önizleme öğesine ihtiyacımız var; standart tarayıcılar için img ve IE için div

HTML:



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

CSS'de aşağıdaki IE'ye özgü şeyi belirtiriz:

CSS:

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

HTML'de standart ve IE'ye özgü Javascript'leri içeririz:


<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>
Balthazar
Edited answer 2015ööp30öö11 Ağustos 2015 в 11:30
Yorumlar (0)

Dosyayı yükleyen ve özel bir olayı tetikleyen bir işlev oluşturmaya ne dersiniz? Ardından girişe bir dinleyici ekleyin. Bu şekilde dosyayı sadece görüntüleri önizlemek için değil, kullanmak için daha fazla esnekliğe sahip oluruz.

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

Muhtemelen kodum bazı kullanıcılar kadar iyi değil ama sanırım ne demek istediğimi anlayacaksınız. Burada bir [örnek][1] görebilirsiniz

ajorquera
Edited answer 2014ösp28ös13 Mart 2014 в 1:28
Yorumlar (0)