Javascript FileReader的onload事件未触发

Question

Javascript FileReader的onload事件未触发

javascripthtml

23

我有一段时间没有使用JavaScript了，现在我似乎无法读取文本文件并将其内容显示出来。

我已经尝试过onload和onloadend。如果我只是放置reader.onload = alert('Hello');，alert会触发，但我无法让函数起作用。

不太确定接下来该怎么做。我尝试在reader.onload = function(evt)...之后定义函数，但那样行不通。

我在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>

- Cody B

那么你是在浏览器中运行这段代码？试图从你的系统中读取本地文件？我相当确定浏览器会阻止你这样做。你的浏览器控制台有什么提示？ - Greg Hewgill

错误控制台没有任何提示。在Safari中也是如此。 - Cody B

4个回答

1

你可以使用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();

- Ahmad Anas

0

我有同样的问题，但我找到了解决方案。除非用户拥有权限，否则您无法读取本地文件。您可以在页面上放置一个<input type="file">。当文件输入更改时，您可以读取数据。

- simon.Du

-2

对我来说什么都没用。下面是我丑陋的解决方案，但这是唯一能完成工作的方法。在我的情况下，用户最多可以上传3个文件，所以变量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);
   } 
   }   
  
   }
  }
  }
  };

- riopiedra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LUKE · Accepted Answer

由于安全原因，您无法像那样获取本地文件。

另一个潜在的问题是readAsText（以及所有read函数）需要文件内容而不是文件路径/名称。您可以从input type =“file”元素的文件集合中获取此内容。以下是代码的工作方式：

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/

注意：此代码在 Safari 浏览器中无法工作。