Javascript FileReader API'sı ile birden çok dosyayı tek tek okumak

Birden çok dosyayı okumak için FileReader API kullanıyorum.Javascript FileReader API'sı ile birden çok dosyayı tek tek okumak

<html> <body> 
    <input type="file" id="filesx" name="filesx[]" 
     onchange="readmultifiles(this.files)" multiple=""/> 
    <div id="bag"><ul/></div> 
<script> 
window.onload = function() { 
    if (typeof window.FileReader !== 'function') { 
     alert("The file API isn't supported on this browser yet."); 
    } 
} 

function readmultifiles(files) { 
    var ul = document.querySelector("#bag>ul"); 
    while (ul.hasChildNodes()) { 
     ul.removeChild(ul.firstChild); 
    } 

    function setup_reader(file) { 
     var name = file.name; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      var bin = e.target.result; //get file content 

      // do sth with text 

      var li = document.createElement("li"); 
      li.innerHTML = name; 
      ul.appendChild(li); 
     } 
     reader.readAsBinaryString(file); 
    } 

    for (var i = 0; i < files.length; i++) { setup_reader(files[i]); } 
} 
</script> </body> </html>

sorun tüm dosyalar aynı anda okunan olmasıdır ve dosyalar çok büyük bir toplam boyutunu (toplam) olduğunda, tarayıcı kilitlenmeleri.

Bellek tüketiminin azalması için bir dosyayı diğerinden okumak istiyorum.

Bu mümkün mü?

kaynak

2012-12-20 xaedes

Bir çözüm geldi kendim hangi çalışır.

function readmultifiles(files) { 
    var reader = new FileReader(); 
    function readFile(index) { 
    if(index >= files.length) return; 
    var file = files[index]; 
    reader.onload = function(e) { 
     // get file content 
     var bin = e.target.result; 
     // do sth with bin 
     readFile(index+1) 
    } 
    reader.readAsBinaryString(file); 
    } 
    readFile(0); 
}

kaynak

2012-12-20 15:18:47 xaedes

Neden yeni [FileReader] (https oluşturmaz:

yerine elle her dosya üzerinde yineleme

, bu Object.keys(files) in ES kullanmak temizleyici & çok daha basittir // geliştiricisi Her bir okuma için .mozilla.org/tr/docs/Web/API/FileReader) FileReader nesnesinin, "0" (boş) ile "1" (yükleme) ve ardından "2" (bitene kadar) durumu değiştirildikten sonra yeniden kullanılması gerekmediğine inanıyorum. Bu size ciddi tarayıcı hataları verebilir. – Pacerier

Bu tek dosyaları tek okumalısınız:

function readmultifiles(files) { 
    var ul = document.querySelector("#bag>ul"); 
    while (ul.hasChildNodes()) { 
     ul.removeChild(ul.firstChild); 
    } 
    // Read first file 
    setup_reader(files, 0); 
} 

// Don't define functions in functions in functions, when possible. 

function setup_reader(files, i) { 
    var file = files[i]; 
    var name = file.name; 
    var reader = new FileReader(); 
    reader.onload = function(e){ 
         readerLoaded(e, files, i, name); 
        }; 
    reader.readAsBinaryString(file); 
    // After reading, read the next file. 
} 

function readerLoaded(e, files, i, name) { 
    // get file content 
    var bin = e.target.result; 
    // do sth with text 

    var li = document.createElement("li"); 
    li.innerHTML = name; 
    ul.appendChild(li); 

    // If there's a file left to load 
    if (i < files.length - 1) { 
     // Load the next file 
     setup_reader(files, i+1); 
    } 
}

kaynak

2012-12-20 15:13:18 Cerbrus

harika cevap ... –

Özellikle ES kullanarak the FileReader API yoluyla birden fazla dosya yüklemek için bir çözüm arıyorsanız yeni kullanıcılar, yararına bu soruyu güncelleyerek ediyorum.

<input type="file" onChange="readmultifiles" multiple/> 
<script> 
function readmultifiles(e) { 
    const files = e.currentTarget.files; 
    Object.keys(files).forEach(i => { 
    const file = files[i]; 
    const reader = new FileReader(); 
    reader.onload = (e) => { 
     //server call for uploading or reading the files one-by-one 
     //by using 'reader.result' or 'file' 
    } 
    reader.readAsBinaryString(file); 
    }) 
}; 
</script>

kaynak

2017-08-17 07:13:56 adi

Javascript FileReader API'sı ile birden çok dosyayı tek tek okumak

cevap

İlgili konular