Html 如何在没有ajax的情况下使用html javascript在本地加载文件并显示其内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19017010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to load a file locally and display its contents using html javascript without ajax?
提问by Sachin
i have the following to read a local file and display,
我有以下内容来读取本地文件并显示，
<html>
<head>
<script>
function readfile() {
document.getElementById('iframe').contentDocument.body.firstChild.innerHTML;
}
</script>
</head>
<body>
<iframe id='iframe' src='txt2.txt' onload='readfile()'> </iframe>
<input type="file" id="fileinput" />
</body>
</html>
but here you can see i have already given the file path as 'txt2.txt', but i don't want to give the file name beforehand, instead i want to load the file and display its contents using input type="file", how to do this without using ajax ?
但是在这里您可以看到我已经将文件路径指定为“txt2.txt”，但我不想事先提供文件名，而是想加载文件并使用 input type="file" 显示其内容，如何在不使用 ajax 的情况下做到这一点？
采纳答案by RobAtStackOverflow
Reading local files from the browser is not allowed - This is to prevent websites reading files and stealing your information.
不允许从浏览器读取本地文件 - 这是为了防止网站读取文件和窃取您的信息。
Please see the second post (answer) for more information: Javascript, how to read local file?
有关更多信息，请参阅第二篇文章（答案）： Javascript，如何读取本地文件？
Being able to read a local file from your browser would be a major breach of security
Most browsers will not let you read local files even if the page originated from your local filesystem.
能够从浏览器读取本地文件将是对安全的重大破坏
即使页面源自您的本地文件系统，大多数浏览器也不会让您读取本地文件。
You can however try the HTML5 file API.
但是，您可以尝试HTML5 文件 API。
回答by Nicky Jaidev
The below code will browse a file and copy the content to a textarea:
以下代码将浏览文件并将内容复制到文本区域：
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.\n"
+"name: " + f.name + "\n"
+"type: " + f.type + "\n"
+"size: " + f.size + " bytes\n"
+ "starts with: " + contents.substr(1, contents.indexOf("\n"))
);
document.getElementById('area').value= contents;
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
<textarea rows=20 id="area"></textarea>
