在JavaScript中打开本地文件 [英] Open local files in JavaScript
问题描述
我是JavaScript的新手.我在 StackOverflow 上找到了一个使用javascript打开本地文件的示例.谷歌搜索后，我可以设置我的 Chrome 允许读取本地文件，然后可以运行该示例.但是，我想返回字符串allText并在以后的脚本中使用它.但是字符串在readTextFile()之外变成undefined.
I'm new to JavaScript. I found an example to open local files with javascript on StackOverflow. After some googling, I'm able to set my Chrome to allow reading local files, and I am then able to run that example. However, I want to return the string allText and use it later in my script. But the string become undefined outside readTextFile().
有一个类似的问题这里.似乎与AJAX的异步功能有关.目前，我几乎无法理解这些术语.我只是不明白为什么在这篇文章中XMLHttpRequest.open()的第三个参数设置为true.
There is a similar question here. It seems like it has something to do with the asynchronous feature of AJAX. I can barely the understand the jargons at the moment. I just don't see why in this post the third parameter of XMLHttpRequest.open() is set to be true.
无论如何，下面是我当前的代码.我想在功能readTextFile()之外使用allText.
Anyway, below is my current code. I want to use allText outside function 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>
推荐答案
这实际上很可能是范围问题.因为您是异步设置allText的，所以函数返回后将无法立即使用它.另外，您将在函数中重新初始化allText，无论如何，这都会影响返回范围.
This is actually most likely a scope issue. Because you're setting allText asynchronously, it's not available immediately after the function returns. In addition, you're reinitializing allText within a function, which messes with the scope of the return regardless.
rawFile.onreadystatechange.您可以将执行移到XHR回调中，也可以将函数包装在promise中，这仍然需要您稍微修改控制流.
rawFile.onreadystatechange is executed after the function returns. You can either move the execution into the XHR callback, or wrap the function in a promise, which would still require you modify your control flow a bit.
移动document.write:
Move the 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>
已承诺:
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.
Both of these will ensure that your script doesn't attempt to use allText until it's been returned by the XHR request.
尽管 SantiagoHernández指出，XHR请求是同步的，并且存在范围问题与我最初设想的性质不同.问题在于在函数中重新声明变量，导致返回的变量未定义.
Though as Santiago Hernández pointed out, the XHR request is synchronous, and the scope issue was of a different nature than I first assumed. The problem lies in redeclaring the variable within the function, resulting in the one returned to be undefined.
这篇关于在JavaScript中打开本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
