JavaScript FileReader：将多个文本文件的内容保存到数组中供以后使用

Question

我尝试仅使用纯 JavaScript 将多个文本文件的内容保存到一个数组变量中。我在 Whosebug 上找到了一些类似的问题和答案，并尝试了这个和那个，但没有成功。也许这个问题很容易回答，但我是初学者，请多多包涵。

这是我的代码：

<script>
   fileContents=new Array();

   function getThem(){
      var allFiles=document.getElementById("fileInput").files;

      for(var allFilesCounter=0;allFilesCounter<allFiles.length;allFilesCounter++){

         function readFile(file){
            var reader=new FileReader();

            reader.onload=function(){
               alert(reader.result);
               fileContents[fileContents.length]=reader.result;
            };
            reader.readAsText(file,"UTF-8");
         };
      };
   };
</script>

<input type="file" accept="text/plain" id="fileInput" multiple="multiple" onChange="getThem();">

我已经发现 FileReader 可以工作 "asynchronous"，这似乎要求文件内容的所有处理都在 reader.onload 函数内完成。 "alert" 和其他处理一样有效，但没有将内容分配给全局变量，在我的例子中是 "fileContents[fileContents.length]"。

是否可以通过相当简单的代码实现，或者我是否应该接受将文件内容保存到变量中是不可能的（在我看来这是最简单和优雅的方式，但可能我'我错了）。

提前感谢您的帮助。

Answer 1

您走在正确的道路上，但您创建了函数 readFile 并且没有调用它，这就是为什么您没有获取文件内容，但该函数是不必要的。下面是一个工作片段，代码更简单，希望你能理解它。

var fileContents = [];

document.getElementById('fileInput').addEventListener('change', handleFileSelect);

function handleFileSelect (e) {
    var allFiles = e.target.files;
    for (var i = 0; i < allFiles.length; i++) {
        var reader = new FileReader();
        reader.onload = function(e) {
            alert(e.target.result);
            fileContents.push(e.target.result);
        };
        reader.readAsText(allFiles[i]);
    };
};

<input type="file" accept="text/plain" id="fileInput" multiple="multiple" />

JavaScript FileReader：将多个文本文件的内容保存到数组中供以后使用

JavaScript FileReader: Save multiple text files' contents to array for later use

javascript

filereader