Question

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

这是我的代码：

<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工作“异步”，这似乎要求所有文件内容的处理都在reader.onload-function中完成。 “alert”确实有效，以及其他处理，但没有将内容分配给全局变量，在我的情况下就是“fileContents [fileContents.length]”。

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

提前感谢您的帮助。

Answer 1

你是在正确的道路上，但你创建了函数readFile并且没有调用它，这就是你没有得到文件内容的原因，但是这个函数是不必要的。 Bellow有一个带有更简单代码的工作片段，希望你能理解它。

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：将多个文本文件的内容保存到数组中供以后使用

1 个答案: