한 번에 하나씩 Javascript FileReader API로 여러 파일 읽기

FileReader API를 사용하여 여러 파일을 읽습니다.한 번에 하나씩 Javascript FileReader API로 여러 파일 읽기

<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>

문제는 모든 파일이 동시에 읽도록하고, 파일이 매우 큰 총 크기 (합)이있을 때, 브라우저가 충돌합니다.

한 파일 씩 읽으므로 메모리 사용량이 줄어 듭니다.

이것이 가능합니까?

출처

2012-12-20 xaedes

내가 해결책을 내놓았다 자신있는 작동합니다.

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); 
}

출처

2012-12-20 15:18:47 xaedes

왜 새 [을 FileReader (HTTPS를 생성하지 않는 :

하는 대신 수동으로 각 파일 반복

, 그것은 Object.keys(files) in ES 사용하는 청소기 & 훨씬 간단 // 개발자 .mozilla.org/ko/docs/Web/API/FileReader) 각 읽기에 대한 객체? 나는 FileReader 객체가 상태가'0' (공백)에서'1' (로드 중), 그리고'2' (완료)로 변경된 후에 재사용 할 의도가 없다고 생각한다. 이것은 심각한 브라우저 버그를 줄 수 있습니다. – Pacerier

이 하나를 사용하여 파일을 읽어야

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); 
    } 
}

출처

2012-12-20 15:13:18 Cerbrus

좋은 답변을 ... –

나는 특히 ES를 사용하여 the FileReader API를 통해 여러 개의 파일을 업로드 할 수있는 솔루션을 찾고 새로운 사용자의 이익을 위해이 질문을 업데이트하고 있습니다.

이

<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>

출처

2017-08-17 07:13:56 adi

한 번에 하나씩 Javascript FileReader API로 여러 파일 읽기

답변

관련 문제