2010-12-09 15 views
12

Javascript'teki yeni Dosya API'sı ile, istemcideki istemcilere resmi göstermek için dataURL'leri oluşturmak için Javascript'teki dosyaları okuyabilirsiniz. FileReader'ın aşırı yükleme geri çağrısı içinde File nesnesine ulaşıp ulaşamayacağınızı merak ediyorum. Bir örnekle bu gösterilecektir:HTML5 Dosya API'sı: File nesnesini FileReader geri çağrısı alın

 
var div = document.createElement('div'); 
div.ondrop = function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var files = e.dataTransfer.files; 
    for (var i=0; i<files.length; i++) { 
    var file = files[i]; // this is the file I want!! 
    var filereader = new FileReader(); 
    filereader.onload = function(e) { 
     this; // the FileReader object 
     e.target; // the same FileReader object 
     this.result; // the dataURL, something like data:image/jpeg;base64,..... 
     var img = document.createElement('img'); 
     img.src = this.result; 
     img.title = file.fileName; // This won't be working 
     document.appendChild(img); 
    } 
    } 
    return false; 
} 

yapabileceğim ne - Şu an ne - bir işlevi döngü içeriğini sarın ve yeni bir kapsam oluşturmak için çalıştırmak ve bir dosya tutmak böyle bir kapsamda:

Sadece merak ettim ... Belki bir şeyleri özlüyorum. File nesnesini FileReader'ın onload işlevinden almanın bir yolu var mı? Hem this ve e.target, FileReader nesnesidir ve Dosya değildir. this veya e'da bir dosya var mı? Ben

Teşekkür bir demet :(bulamıyorum

PS A keman:... Ben zaten kapsam sarıcı daha Belki değil iyi bir yol buldum, ama öyle düşünüyorum

cevap

22

http://jsfiddle.net/rudiedirkx/ZWMRd/1/ kıvrımlara var:

:

for (var i=0; i<files.length; i++) { 
    var file = files[i]; // this is the file I want!! 
    var filereader = new FileReader(); 
    filereader.file = file; 
    filereader.onload = function(e) { 
     var file = this.file; // there it is! 
     // do stuff 
    } 
} 

şimdi bir dosyanın veri URL'sini almak için çok daha kolay (görünüşte daha hızlı) yolu (! eşitleme) yoktur Her iki yöntemin http://jsfiddle.net/rudiedirkx/ZWMRd/8/show/ üzerinde gösterimi ve gösterilen orijinal sorun (birden çok görüntüyü sürükleyin ve araç ipuçlarını kontrol edin)

.

-1

Bu dosyanın hala desteklendiğini sanmıyorum. Cevap kodunu çalıştırmayı denediğimde, bu.file undefined, eğer sorudan kodu çalıştırırsam beklenen sonuçları alırım. Bence kapatmayı kullanmalısın (en azından html5rocks'ta (Example) bunu yapıyorlar).

+0

Şu an kullandığım şey (ve bir süredir kullanıyorum): http://js1.hotblocks.nl - javascript: http://js1.hotblocks.nl/tests/ajax/fdd.js - Hala cevabımdaki kodu kullanıyor. Ve çalışıyor. (Çirkin) kapanmadan. (//s ile yazılmıştır.) – Rudie

+0

Eğer Javascript'i beğendiyseniz, (herhangi bir bölümünü) kullanabilirsiniz. Web işçilerinin bu konuda nasıl bir rol oynayabileceğini merak ediyorum (yükleme yapmadan önce bunları okuyabilmeniz ve görüntüleyebilmeniz için resim yükü geri bildirimleri için web işçilerini kullanın) – Rudie

+0

"filereader.file = file;" öğesinin atamasını kaçırdım. Bu çözümü işaret ettiğin için teşekkürler. –

İlgili konular