txtファイル（複数）で値の出力を与える

Question

私は非常にjavascriptでnoobyです。 複数のtxtファイルの値を表示します。現時点では、 "handleTextFile"関数と "search"関数に "for"を挿入しようとしたが、機能していないファイルが1つしかないコードがある。下のコードをどのように修正する必要がありますか？

HTML

<input type="file" id="fText" name="files[]" multiple/> 
<br><br> 
<button onclick="search()">search</button> 
<output id="list"></output> 

javascriptの

<script> 
    var Text = ""; 
    var Zertifikate; 

    function handleTextFile(evt) 
    {  
      var files = evt.target.files; 
      var reader = new FileReader(); 
      reader.onload = function(){ 
      Text = reader.result.toLowerCase(); 
      }; 
      reader.readAsText(files[0]);   
    } 


    function search() 
    { 
     output = []; 
     document.getElementById('list').innerHTML = '<ul>' + "" + '</ul>'; 
       output.push(Text); 
     document.getElementById('list').innerHTML = '<ul>' + output.join('\r\n') + '</ul>'; 
    } 

    document.getElementById('fText').addEventListener('change', handleTextFile, false); 

</script> 

Answer 1

あなたは正しい道にありました。各ファイルをループするために必要なテキストファイル関数の処理では、readFileを使用してテキストを取得し、そのテキストを配列に追加します。

検索機能では、ファイルからテキストを含む配列をループし、このテキストで必要なhtmlを作成し、最終的に出力要素に追加するだけでした。ここで

は物事を説明することにコメントして作業exempleです：

HTML：

<input type="file" id="fText" multiple/> 
<br><br> 
<button id="searchBtn">search</button> 
<ul id="output"></ul> 

はJavaScript：

// store text of files in this array 
var filesText = []; 

// get all elements we need 
var output = document.getElementById('output'); 
var fileInput = document.getElementById('fText'); 
var searchBtn = document.getElementById('searchBtn'); 

// add listeners 
fileInput.addEventListener('change', onInputChange, false); 
searchBtn.addEventListener('click', onSearchClick, false); 

// all of our functions 
function onInputChange(e) { 
    var files = e.target.files; 
    // resetFilesText 
    filesText = []; 
    for (var i = 0; i < files.length; i++) { 
     // fileReader return the result in an asynchronous way and so return the result after the end of the loop 
     // so if you do it in the loop directly you will only have the last file 
     // that's why I'm doing it in an other function, hope it's clear. 
     readFile(files[i]); 
    } 
} 

function readFile(file) { 
    var reader = new FileReader(); 
    reader.onload = function() { 
     // push file text in filesText array 
     filesText.push(reader.result.toLowerCase()); 
    }; 
    reader.readAsText(file); 
} 

function onSearchClick(e) { 
    // will produce a single string with '<li>text from file 1</li><li>text from file 2</li><li> etc etc'; 
    var list = filesText.map(function(text) { 
     return '<li>' + text + '</li>'; 
    }).join(''); 

    output.innerHTML = list; 
} 

は、それは明らかだと思います。