Question

我在javascript中非常高兴。我想要显示多个txt文件的值。目前我只有一个文件的代码，我试图在函数“handleTextFile”和“search”中插入“for”但它不起作用。我如何修改下面的代码？

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，最后将它添加到你的输出元素。

这是一个工作例子，里面有评论解释：

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

希望很清楚。

在txt文件中给出值的输出（多个）

1 个答案: