如何在浏览器中读取本地文本文件?

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

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)上工作?

当前回答

如何读取本地文件?

通过使用这个，你将通过loadText()加载一个文件，然后JS将异步等待，直到文件被读取和加载之后，它将执行readText()函数，允许你继续使用正常的JS逻辑(你也可以在loadText()函数上写一个try catch块，以防出现任何错误)，但在这个例子中，我将它保持在最小。

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');

2019-10-03 13:33:50

其他回答

在js(data.js) load中获取本地文件数据:

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

data.js文件如下:

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

dynamic unixTime queryString阻止缓存。

AJ在网站http://.工作

2019-04-26 05:20:11

您需要检查状态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");

2013-01-21 20:20:34

你可以导入我的库: < 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文件工作。

2019-01-03 23:40:13

另一个例子-我的阅读器与FileReader类

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

2015-02-19 15:35:07

由于同源策略的原因，Chrome不支持本地AJAX调用。

chrome上的错误信息是这样的: “跨源请求不支持协议方案:http, data, chrome, chrome-extension, https。”

这意味着chrome为每个域创建一个虚拟磁盘，以保存使用http/https协议的域提供的文件。对该虚拟磁盘以外的任何文件的访问都受到同源策略的限制。AJAX请求和响应发生在http/https上，因此不适用于本地文件。

Firefox没有这样的限制，因此您的代码可以在Firefox上愉快地工作。然而，铬也有变通办法:请看这里。

2018-12-26 12:12:08

如何在浏览器中读取本地文本文件?

推荐文章

最新文章

标签