【问题标题】:Javascript read text file from current directoryJavascript从当前目录读取文本文件
【发布时间】:2020-11-09 00:32:57
【问题描述】:

如何在没有 jquery 的情况下使用 javascript 从当前目录读取文本文件 (text1.txt)。我尝试了以下代码。

var file = "text1.txt";
var reader = new FileReader();
var result = reader.readAsText(file);
console.log(result);

【问题讨论】:

  • 当前目录是什么意思
  • 用户必须先将文件“上传”到页面,然后才能选择它。未经用户同意,您无法访问文件。或者文件在你的服务器上吗?那么你需要 Ajax,而不是 FileReader。
  • 查看 API 文档,这是一个异步操作。您的 result 仅在加载完成后才有效。 developer.mozilla.org/en-US/docs/DOM/…
  • 我上面代码的结果是未定义的。不是用户上传的文件。是一个文本文件和我的 html 文件和 javascript 文件在一个公共文件目录中。

标签: javascript html


【解决方案1】:

FileReader API 通常用于读取通过<input type="file"> 选择的文件。它不能读取任意文件。 readAsText method 期望接收 Blob 或 File 对象,而不是包含文件名的字符串。

要读取 HTML 文档的同级文件,请使用 XMLHttpRequest。如果您通过 HTTP(S) 加载文档,这将可靠地工作。如果您使用的是本地 HTML 文档(通过 file: URI),那么许多浏览器中的安全限制会阻止它工作(您应该运行本地 Web 服务器)。

【讨论】:

    【解决方案2】:

    选项 A,您的用例阻止您使用 http 或 php 服务器。 您可以使用脚本包含将本地内容作为变量包含在您的 javascript 中。如果您在本地打开页面,作为目录中的文件,这是在网页中包含本地内容的唯一方法。

    要包含本地内容,请将其放在您的其他脚本标记之上:

    <script src="text1.txt"></script>
    

    并编辑您的 text1.txt 文件,以便将所有内容分配给一个变量:

    gbl_text=`...contents of my text file...
    ...more contents...
    ...and so on....   
    `
    

    您可以使用脚本来创建此包含文件,例如(使用波浪号 ~ 键下方的 ` 标记):

    echo -n "var gbl_text=\`" > text1.txt
    cat your-original-file.txt >> text1.txt
    echo "\`" >> text1.txt
    

    然后根据需要在您的 javascript 中使用 gbl_text 变量...

    function dosomething()
    {
      if (typeof(gbl_text)=='undefined'){
        setTimeout('dosomething()',500)  //call back until defined
      }else{
        console.log(gbl_text)
      }
    }
    

    选项 B,您的用例将允许您使用 php-cli 内置服务器。 如果能够运行 php-cli,则可以在内置的 php 网络服务器上打开页面,并通过 php 调用读取和写入本地内容。在linux上安装和使用php,

    sudo apt install php7.0-cli
    #To use the php built-in webserver, run:
    php -S localhost:8000 -t /path/to/your/content
    

    因此,不是将 html 作为文件打开,而是作为 http 网页打开:

    firefox http://localhost:8000/mypage.html
    #or browser of choice
    

    现在本地网页由支持 php 的实际(本地)http 服务器提供服务,您可以使用它来操作本地文件。

    这是一个简单的例子,展示了如何使用 jQuery 和 php 读取和写入本地文件。下载 jQuery(参见 jQuery.com)并将其包含在您的 html 文件中。

    dofile.php 的内容:

    <?php 
    $dowhat  = $_REQUEST['dowhat'];
      if ($dowhat=='save'){
        $myvar = $_REQUEST['myvar'];
        file_put_contents('myfile', $myvar); 
      }elseif($dowhat=='read'){
        $myvar=file_get_contents('myfile');
        echo $myvar; 
      }
    ?> 
    

    mypage.html 的内容:

    <script src='jquery-3.2.1.js';></script>
    <!--make sure the filename matches the jQuery you use-->
    
    <script>
    function savevar(){
      var myvar=document.getElementById('mytxt').value
      var path="dofile.php?dowhat=save&myvar="+myvar 
      $.get(path, function(data){
        console.log("saved ...\n"+myvar)
        alert("saved ...\n"+myvar)
      });
    }
    
    function clearbox(){
      document.getElementById('mytxt').value='reading file...'
      setTimeout('getvar()',1000)
    }
    
    function getvar(){
      var path="dofile.php?dowhat=read"
      $.get(path, function(data){
        console.log(data);
        document.getElementById('mytxt').value=data
        /*do other things with data here*/;
      });
    }
    </script>
    
    <html>
    Type something in the text box.<br>
    Use the Read and Write buttons to verify <br>
    text is saved and read back.<br> 
    <input id='mytxt' value='type text here' onclick=document.getElementById('mytxt').value=''><br>
    <input type='button' value='Save' onclick=savevar() ><input type='button' value='Read' onclick=clearbox() >
    
    </html>
    

    【讨论】:

    • 谢谢。这对我的几个页面有所帮助,但现在我需要弄清楚如何使脚本源成为变量,然后通过本地存储将其传递给新页面。
    • 我重写了答案,以阐明在 html 文档中包含本地文件的几种方法。如果有人知道为什么这被否决,请发表评论,我会尝试改进答案。由于浏览器的安全限制,只有几种方法可以引入本地内容。另一种方法可能是使用 Python 和 webkit,但我不想发布更多信息,除非有人愿意为答案投票。
    【解决方案3】:

    请区分2种阅读文件:

    • “从互联网”读取 - 使用 XMLHttpRequest 读取任何类型的文件
    • “从客户端”读取 - 使用 FileReader 或 &lt;input type="file"&gt;

    【讨论】:

      【解决方案4】:

      制作一个小的 iframe。 在那里加载文件。 用 iframe.innerHTML 阅读它

      【讨论】:

      • 请用代码例如简要描述您的问题。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2014-04-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多