Html Javascript FileReader 加载未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18542907/
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
Javascript FileReader onload not firing
提问by Cody B
I haven't used JavaScript in a while and I can't seem to read a text file and display the contents.
我有一段时间没有使用 JavaScript，我似乎无法读取文本文件并显示内容。
I've tried onloadas 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.
我试着onload和onloadend。如果我只是reader.onload = alert('Hello');发出警报，但我无法使用该功能进行任何操作。
Not exactly sure where to go from here. I've tried defining the function after reader.onload = function(evt)...but that doesn't work.
不完全确定从这里去哪里。我试过在之后定义函数，reader.onload = function(evt)...但这不起作用。
I've tried in Safari 6.0.5 and Chrome as well.
我也尝试过 Safari 6.0.5 和 Chrome。
<!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>
回答by LUKE
You can't grab a local file like that for security reasons.
出于安全原因，您不能像这样获取本地文件。
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:
另一个潜在问题是 readAsText（和所有读取函数）需要文件的内容而不是文件路径/名称。您可以从 input type="file" 元素的 files 集合中获取它。以下是您的代码的工作方式：
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]);
};
Here is the jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/
这是 jsfiddle：http: //jsfiddle.net/fstreamz/ngXBV/1/
Note:this code not work in safari browser
注意：此代码在 safari 浏览器中不起作用
回答by Ahmad Anas
you can use ajax to get the content of your file:
您可以使用 ajax 来获取文件的内容：
var reader= new XMLHttpRequest();
reader.open('GET', '/pi.txt');
reader.onreadystatechange =readSuccess();
function readSuccess(evt) {
var field = document.getElementById('main');
field.innerHTML = reader.responseText;
};
reader.send();
回答by simon.Du
I have the same the problem and I found a solution. You can't read the local file unless the user has permission. You can put a <input type="file">on your page. When the file input change, you can read the data.
我有同样的问题，我找到了解决方案。除非用户有权限，否则您无法读取本地文件。你可以<input type="file">在你的页面上放一个。当文件输入改变时，可以读取数据。
回答by riopiedra
Nothing worked for me. Below you can find my ugly solution, but it was the only one that did the job. In my case the user can upload up to 3 files, so the var iPDF can be 0,1,2.
没有什么对我有用。您可以在下面找到我丑陋的解决方案，但它是唯一完成这项工作的解决方案。在我的例子中，用户最多可以上传 3 个文件，所以 var iPDF 可以是 0,1,2。
var iPDF=UpdatedExistingNumberOfPDFfiles;
if (iPDF < NoMaxPDFfiles) {
var reader = new FileReader();
reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
reader.onload = function (){
var PDFdataURL = reader.result;
var xhr = new XMLHttpRequest();
xhr.open("POST", "Observation_PDFUpload.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var NumberOfPDFfile = iPDF+1;
xhr.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
iPDF++;
if (iPDF < NoMaxPDFfiles) {
reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
reader.onload = function (){
PDFdataURL = reader.result;
var xhr1 = new XMLHttpRequest();
xhr1.open("POST", "Observation_PDFUpload.php",true);
xhr1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
NumberOfPDFfile = iPDF+1;
xhr1.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
iPDF++;
if (iPDF < NoMaxPDFfiles) {
reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]);
reader.onload = function (){
PDFdataURL = reader.result;
var xhr2 = new XMLHttpRequest();
xhr2.open("POST", "Observation_PDFUpload.php",true);
xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
NumberOfPDFfile = iPDF+1;
xhr2.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile);
}
}
}
}
}
};