Javascript FileReader onload没有触发 [英] Javascript FileReader onload not firing
问题描述
我暂时没有使用过JavaScript，我似乎无法读取文本文件并显示内容。
I haven't used JavaScript in a while and I can't seem to read a text file and display the contents.
我试过 onload 以及 onloadend 。如果我只是把 reader.onload = alert（'Hello'）; 警报触发，但是我无法使用该函数。
I've tried onload as well as onloadend. If I just put reader.onload = alert('Hello'); the alert fires, but I can't get anything to work with the function.
不确定从何处开始。我已经尝试在 reader.onload = function（evt）... 之后定义函数，但这不起作用。
Not exactly sure where to go from here. I've tried defining the function after reader.onload = function(evt)... but that doesn't work.
我在Safari 6.0.5和Chrome中也尝试过。
I've tried in Safari 6.0.5 and Chrome as well.
<!DOCTYPE HTML>
<html>
<head>
<title>Pi to Colors</title>
</head>
<body>
<script>
function readFile() {
var reader = new FileReader();
reader.onload = readSuccess;
function readSuccess(evt) {
var field = document.getElementById('main');
field.innerHTML = evt.target.result;
};
reader.readAsText("/pi.txt");
}
</script>
<div id="main">
</div>
</body>
</html>
推荐答案
你无法获取这样的本地文件安全原因。
You can't grab a local file like that for security reasons.
另一个根本问题是readAsText（和所有读取函数）需要文件的内容而不是文件路径/名称。您可以从input type =file元素的files集合中获取它。以下是您的代码的工作方式：
Another underlying problem is that readAsText (and all the read functions) need the file's content and not its file path/name. You can grab this from the files collection of the input type="file" element. Here is how your code could work:
function readFile(file) {
var reader = new FileReader();
reader.onload = readSuccess;
function readSuccess(evt) {
var field = document.getElementById('main');
field.innerHTML = evt.target.result;
};
reader.readAsText(file);
}
document.getElementById('selectedFile').onchange = function(e) {
readFile(e.srcElement.files[0]);
};
这是jsfiddle：
http://jsfiddle.net/fstreamz/ngXBV/1/
Here is the jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/
注意：此代码在Safari浏览器中不起作用
Note: this code not work in safari browser
这篇关于Javascript FileReader onload没有触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
