İlerleme Çubuğu ve Geri Aramalar, FileReader'ın asenkron doğasıyla nasıl uygulanır

Question

Birden çok dosya nesnesinde yineleme yapmak için bir for döngüsünde çağrılan FileReader API'm var. Esasen görüntülerin önizlemesini görüntülemek için FileReader kullanıyorum.

function() { 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 

     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 

    // do something on completion of FileReader process 
    // actions here run before completion of FileReader 
} 

FileReader API'sinin async niteliğinden dolayı iki soruna yanıt veriyorum. İlk olarak, her bir FileReader örneği için onprogress olay patlar. Bu bana her dosya için ilerleme sağlıyor. Bununla birlikte, tek tek dosyalar yerine tüm dosyaların toplam ilerlemesini göstermeyi planlıyorum. Ikinci olarak, yalnızca FileReader'ın tüm örnekleri (her dosya için bir tane) tamamlandığında gerçekleştirilmesi gereken eylemleri gerçekleştirmek istiyorum. Şu anda, FileReader eşzamansız olarak çalıştığından, FileReader görevini tamamlamadan önce eylemler çalışır. Çok fazla arama yaptım ve bu sorunlara çözüm bulmak için geldim. Herhangi bir yardım takdir edilir.

Answer 1

Önce ikinci sorununuzu çözelim. Tüm dosya yüklendi kez bu işlevi ayrı fonksiyonu içinde sonrası tamamlama kodunu tanımlamak ve çağırmanız gerekir:

function() { 
    var total = Files.length; loaded = 0; 
    for (var i in Files) { 
     var fileReader = new FileReader(); 
     fileReader.readAsBinaryString(Files[i]); 
     fileReader.onload = function() { 

      // do something on FileReader onload 
      loaded++; 

      if (loaded == total){ 
       onAllFilesLoaded(); 
      } 
     } 

     fileReader.onprogress = function(data) { 
      if (data.lengthComputable) {            
       var progress = parseInt(((data.loaded/data.total) * 100), 10); 
       console.log(progress); 
      } 
     } 
    } 
} 

function onAllFilesLoaded(){ 
    //do stuff with files 
} 

Şimdi, ilerlemeyi izlemek için, bunu ele verebilir birkaç farklı yolu vardır. Şu anda tüm dosyaları bir kerede yüklüyorsunuz ve her dosya kendi ilerlemesini bildiriyor. Daha az ilerleme durumu güncellemesine aldırmazsanız, bir dosya yüklendiğinde ilerlemeyi bildirmek için yalnızca yükleme işleyicisini kullanabilirsiniz. Gerçekten iyi hazırlanmış, doğru ilerleme güncellemelerini istiyorsanız, tüm dosyaların toplam boyutunu hesaplamak zorunda kalacaksınız, ardından her dosyanın ne kadarının yüklendiğini takip etmeli ve her biri için ne yüklendiğini topla dosya ilerleme durumunu bildirmek için tüm dosyaların toplam boyutuna kıyasla. Alternatif olarak, bunu konsol.log yerine bir ilerleme çubuğu ile uyguladığınızı varsayarak, yüklenen her dosya için ayrı bir ilerleme çubuğu sağlayabilirsiniz ve her dosya için ilerlemeyi tam olarak şimdi yaptığınız gibi hesaplayabilirsiniz. ve ardından karşılık gelen ilerleme çubuğunu günceller. Bunlardan herhangi birinin açıklığa ihtiyacı varsa bana bildirin.