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

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


当前回答

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

其他回答

如果你想提示用户选择一个文件,那么读取它的内容:

// read the contents of a file input
const readInputFile = (inputElement, callback) => {
  const reader = new FileReader();
  reader.onload = () => {
    callback(reader.result)
  };
  reader.readAsText(inputElement.files[0]);
};
// create a file input and destroy it after reading it
const openFile = (callback) => {
  var el = document.createElement('input');
  el.setAttribute('type', 'file');
  el.style.display = 'none';
  document.body.appendChild(el);
  el.onchange = () => {readInputFile(el, (data) => {
    callback(data)
    document.body.removeChild(el);
  })}
  el.click();
}

用法:

// prompt the user to select a file and read it
openFile(data => {
    console.log(data)
  })

这是一个老问题,但有两个主要观点我们必须弄清楚。我们是想读取整个文件还是逐行获取?

泰欧,我想要完整的文件然后再处理。

好的,这很简单,我们只需调用text(记住,text假设文件是UTF-8编码的),并像这样处理文件:

const $output = document.getElementById('output') const $file = document.getElementById('file') const fetchFile = async e => { Const [file] = e.target.files Const text = await file.text() 美元输出。textContent = text } 美元的文件。onchange = fetchFile <input id='file' type='file' accept='text/plain'><br> < pre id =“输出”>…< / >之前

那一行一行呢?这是可能的?

好吧,我的小徒弟,这也是可能的我们只需要像这样把文本分成几行

const $output = document.getElementById('output') const $file = document.getElementById('file') 让数 const fetchFile = async e => { Const [file] = e.target.files If (!file)返回 计数= 0 Const text = await file.text() 美元输出。textContent = text Const lines = text.split(/\r?\n/gm) For (const line of lines) { 如果(行)计数++ } console.log({数}) } 美元的文件。onchange = fetchFile <input id='file' type='file' accept='text/plain'><br> < pre id =“输出”>…< / >之前

加上上面的一些答案,这个修改后的解决方案对我来说很有效。

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}

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

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

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

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

另一个例子-我的阅读器与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>