用JavaScript打开本地文件

我是JavaScript的新手.我找到了一个在StackOverflow上使用javascript打开本地文件的示例.经过一些谷歌搜索,我能够设置我的Chrome以允许读取本地文件,然后我就可以运行该示例了.但是,我想返回字符串allText并稍后在我的脚本中使用它.但是字符串在readTextFile()之外变得不确定.

有一个类似的问题here.看起来它与AJAX的异步功能有关.我现在几乎无法理解这些术语.我只是不明白为什么在这篇文章中XMLHttpRequest.open()的第三个参数被设置为true.

无论如何,下面是我目前的代码.我想在函数readTextFile()之外使用allText.

<!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>

解决方法:

这实际上很可能是一个范围问题.因为您正在异步设置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>

Promisified：

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.

虽然正如Santiago Hernández所指出的那样,XHR请求是同步的,并且范围问题与我最初假设的不同.问题在于在函数内重新声明变量,导致返回的变量未定义.

用JavaScript打开本地文件

相关推荐