使用Javascript读取文本文件_Javascript_Html_Text Files

使用Javascript读取文本文件

javascript html

使用Javascript读取文本文件,javascript,html,text-files,Javascript,Html,Text Files,下面的代码应该在加载时读取当前目录中的文本文件的内容，并将其显示在html页面上。我试着自己修改。但它没有给出输出。有没有一种更简单的方法可以用另一种方法得到这个结果？或者请帮助找出此代码的错误所在 <html> <head> <meta http-equiv='Content-type' content='text/html;charset=UTF-8' > <script>

下面的代码应该在加载时读取当前目录中的文本文件的内容，并将其显示在html页面上。我试着自己修改。但它没有给出输出。有没有一种更简单的方法可以用另一种方法得到这个结果？或者请帮助找出此代码的错误所在

<html>
        <head>
            <meta http-equiv='Content-type' content='text/html;charset=UTF-8' >
            <script>
    function startRead()
    {
      // obtain input element through DOM 

    var file = document.getElementById("\\file.txt").files[0]

      if(file)
        {
        getAsText(file);
      }
    }

    function getAsText(readFile)
    {
        var reader;
        try
        {
        reader = new FileReader();
        }catch(e)
        {
            document.getElementById('output').innerHTML = 
                "Error: seems File API is not supported on your browser";
          return;
      }

      // Read file into memory as UTF-8      
      reader.readAsText(readFile, "UTF-8");

      // Handle progress, success, and errors

      reader.onload = loaded;
      reader.onerror = errorHandler;
    }



    function loaded(evt)
    {
      // Obtain the read file data    
      var fileString = evt.target.result;
      document.getElementById('output').innerHTML = fileString;
    }

    function errorHandler(evt)
    {
      if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR)
        {
        // The file could not be read
            document.getElementById('output').innerHTML = "Error reading file..."
      }
    }
    //Start reading file on load
    window.addEventListener("load", startRead() { }, false);

            </script>
        </head>

        <body>

            <pre>
                <code id="output">
                </code>
            </pre>
        </body>
    </html>


函数startRead（）
{
//通过DOM获取输入元素
var file=document.getElementById（“\\file.txt”）.files[0]
如果（文件）
{
getAsText（文件）；
}
}
函数getAsText（readFile）
{
变量读取器；
尝试
{
reader=newfilereader（）；
}捕获（e）
{
document.getElementById（'output'）。innerHTML=
“错误：您的浏览器不支持文件API”；
返回；
}
//将文件作为UTF-8读入内存
reader.readAsText（readFile，“UTF-8”）；
//处理进度、成功和错误
reader.onload=已加载；
reader.onerror=errorHandler；
}
已加载函数（evt）
{
//获取读取的文件数据
var fileString=evt.target.result；
document.getElementById（'output'）.innerHTML=fileString；
}
函数errorHandler（evt）
{
if（evt.target.error.code==evt.target.error.NOT\u READABLE\u ERR）
{
//无法读取该文件
document.getElementById（'output'）.innerHTML=“读取文件时出错…”
}
}
//加载时开始读取文件
addEventListener（“加载”，startRead（）{}，false）；

下面给出的代码是我修改后得到的上面的代码。我的意图是。当我打开html文件时，它将读取当前目录中的文本文件并显示内容

<html>
  <head>
    <title>reading file</title>
   </head>
<body>


函数startRead（）
{
//通过DOM获取输入元素
var file=document.getElementById（“文件”）.files[0]；
如果（文件）
{
getAsText（文件）；
}
}
函数getAsText（readFile）
{
变量读取器；
尝试
{
reader=newfilereader（）；
}捕获（e）
{
document.getElementById（'output'）。innerHTML=
“错误：您的浏览器不支持文件API”；
返回；
}
//将文件作为UTF-8读入内存
reader.readAsText（readFile，“UTF-8”）；
//处理进度、成功和错误
reader.onload=已加载；
reader.onerror=errorHandler；
}
已加载函数（evt）
{
//获取读取的文件数据
var fileString=evt.target.result；
document.getElementById（'output'）.innerHTML=fileString；
}
函数errorHandler（evt）
{
if（evt.target.error.code==evt.target.error.NOT\u READABLE\u ERR）
{
//无法读取该文件
document.getElementById（'output'）.innerHTML=“读取文件时出错…”
}
}

试试这个片段，我刚试过，效果不错：）

var fileInput=document.getElementById（'fileInput'）；
var fileDisplayArea=document.getElementById（'fileDisplayArea'）；
fileInput.addEventListener（'change'，函数（e）{
var file=fileInput.files[0]；
var textType=/text.*/；
if（file.type.match（textType））{
var reader=new FileReader（）；
reader.onload=函数（e）{
var content=reader.result；
//这里的内容已被成功阅读
警报（内容）；
}
reader.readAsText（文件）；
}否则{
fileDisplayArea.innerText=“不支持文件！”
}
});







document.getElementById（“openfile”）.addEventListener（'change'，function（））{
var fr=new FileReader（）；
fr.onload=函数（）{
document.getElementById（“filecontents”）.textContent=this.result；
}
fr.readAsText（this.files[0]）；
})
Java与JavaScriptdocument无关。getElementById（“\\file.txt”）
不存在于文档中，因此当您尝试从中读取时会出现异常。查看您的JavaScript控制台。是否执行此document.getElementById（“\\file.txt”）.files[0]
行获取任何元素。我不这么认为。你想在这里做什么？“load”，startRead（）{}，false是一个语法错误，所以当你试图编译代码时会出现异常。看看你的JavaScript控制台。下面的代码片段是否与上面的代码片段相反？我是JavaScript新手。我应该把什么作为输入文件ID？它是一个文件路径吗？它有一个特定的格式吗？我添加了一个带有现场演示的链接，看看：）@CobraI刚刚试过，但没有输出：/@assa你试过现场演示吗？你在使用哪个浏览器？是的，我试过了，但没有输出。我使用的是Mozilla Firefox版本37.0.1，我也在chrome上试用过，结果也是一样。
<html>
  <head>
    <title>reading file</title>
   </head>
<body>