我试图通过创建一个函数来实现一个简单的文本文件阅读器,该函数接受文件的路径并将每行文本转换为字符数组,但它不起作用。

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

这里出了什么问题?

这似乎仍然不工作后,改变了代码一点点从以前的修订,现在它给我一个XMLHttpRequest异常101。

我已经在Firefox上测试过了,它可以工作,但在谷歌Chrome中,它不会工作,它一直给我一个101例外。我怎么能让它不仅在Firefox上工作,而且在其他浏览器(尤其是Chrome)上工作?


当前回答

访问javascript !转到readAsText部分并尝试这个示例。您将能够了解FileReader的readAsText函数是如何工作的。

var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var text = reader.result; var node = document.getElementById('output'); node.innerText = text; console.log(reader.result.substring(0, 200)); }; reader.readAsText(input.files[0]); }; <input type='file' accept='text/plain' onchange='openFile(event)'><br> <div id='output'> ... </div>

其他回答

var input = document.getElementById("myFile"); var output = document.getElementById("output"); input.addEventListener("change", function () { if (this.files && this.files[0]) { var myFile = this.files[0]; var reader = new FileReader(); reader.addEventListener('load', function (e) { output.textContent = e.target.result; }); reader.readAsBinaryString(myFile); } }); <input type="file" id="myFile"> <hr> <textarea style="width:500px;height: 400px" id="output"></textarea>

你可以导入我的库: < script src = " https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com " > < /脚本>

然后,函数fetchfile(path)将返回上传的文件 < script src = " https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js " > < /脚本> < >脚本console.log (fetchfile(“file.txt”))> < /脚本

请注意:在谷歌Chrome浏览器上,如果HTML代码是本地的,会出现错误,但在线保存HTML代码和文件,然后运行在线HTML文件工作。

访问javascript !转到readAsText部分并尝试这个示例。您将能够了解FileReader的readAsText函数是如何工作的。

var openFile = function(event) { var input = event.target; var reader = new FileReader(); reader.onload = function() { var text = reader.result; var node = document.getElementById('output'); node.innerText = text; console.log(reader.result.substring(0, 200)); }; reader.readAsText(input.files[0]); }; <input type='file' accept='text/plain' onchange='openFile(event)'><br> <div id='output'> ... </div>

现代的解决方案:

使用fileOrBlob.text()如下所示:

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

当用户通过输入上传一个文本文件时,它将被记录到控制台。下面是一个工作中的jsbin演示。

这里有一个更详细的版本:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

目前(2020年1月)这只适用于Chrome和Firefox,如果你将来读到这篇文章,请查看这里的兼容性:https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

在旧的浏览器上,这应该是有效的:

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>

相关:截至2020年9月,Chrome和Edge中提供了新的本地文件系统API,以防止你想要对用户选择的文件进行永久的读取访问(甚至是写入访问)。

您需要检查状态0(当使用XMLHttpRequest在本地加载文件时,您不会返回状态,因为它不是来自web服务器)

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

在你的文件名中指定file://:

readTextFile("file:///C:/your/path/to/file.txt");