用JavaScript打开本地文件

小编典典

用JavaScript打开本地文件

ajax

我是JavaScript新手。我找到了一个使用上的javascript打开本地文件的示例。进行一些谷歌搜索之后，我可以将Chrome设置为允许读取本地文件，然后可以运行该示例。但是，我想返回该字符串allText并在以后的脚本中使用它。但是绳子变成undefined外面了readTextFile()。

还有一个类似的问题在这里。似乎与的异步功能有关AJAX。目前，我几乎无法理解这些术语。我只是不明白为什么在本文中将的第三个参数XMLHttpRequest.open()设置为true。

无论如何，下面是我当前的代码。我想使用allText外部函数readTextFile()。

<!DOCTYPE html>
<html>
    <script>
        function readTextFile(file)
        {   
            var allText;
            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);
            return allText; // this is the part that goes wrong I think
        }

        t = readTextFile("foo.file");
        document.write(t) // print out "undeifned" instead of the correct answer

    </script>
</html>

阅读 1583

2020-07-26

共1个答案

小编典典

实际上，这很可能是范围问题。由于您异步设置allText，因此函数返回后将无法立即使用它。另外，您将在函数中重新初始化allText，这无论如何都会影响返回范围。

rawFile.onreadystatechange函数返回后执行。您可以将执行移到XHR回调中，也可以将函数包装在promise中，这仍然需要您稍微修改控制流。

移动document.write：

<!DOCTYPE html>
<html>
    <script>
        function readTextFile(file)
        {   
            var allText;
            var rawFile = new XMLHttpRequest();
            rawFile.open("GET", file);
            rawFile.onreadystatechange = function ()
            {
                if(rawFile.readyState === 4)
                {
                    if(rawFile.status === 200 || rawFile.status == 0)
                    {
                        allText = rawFile.responseText;
                        document.write(allText);
                    }
                }
            }
            rawFile.send(null);
        }

        readTextFile("foo.file");

    </script>
</html>

promise：

function readTextFile( file ) {
  return new Promise( function ( fulfill, reject ) {

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open( "GET", file );
    rawFile.onreadystatechange = function () {
      if ( rawFile.readyState === 4 ) {
        if ( rawFile.status === 200 || rawFile.status == 0 ) {
          fulfill( rawFile.responseText )
        }
      }
    }
    rawFile.send( null );
  } );
}
readTextFile( "foo.file" )
  .then( function ( t ) {
    document.write( t );
  } );

这两种方法都将确保您的脚本在XHR请求返回之前不会尝试使用allText。

尽管正如SantiagoHernández所指出的那样，XHR请求是同步的，范围问题的性质与我最初设想的不同。问题在于在函数中重新声明变量，导致返回的变量未定义。

2020-07-26