21

我有一段时间没有使用 JavaScript，而且我似乎无法读取文本文件并显示内容。

我也试过onload了onloadend。如果我只是reader.onload = alert('Hello');触发警报，但我无法使用该功能。

不完全确定从这里去哪里。我试过之后定义函数，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>
4

4 回答 4

24

出于安全原因，您不能获取这样的本地文件。

另一个潜在问题是 readAsText（和所有读取函数）需要文件的内容，而不是文件路径/名称。您可以从 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 浏览器中不起作用

于 2013-08-31T03:07:15.393 回答
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();
于 2013-08-31T04:49:59.263 回答
0

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

于 2016-01-08T09:34:28.890 回答
-1

没有什么对我有用。您可以在下面找到我丑陋的解决方案，但它是唯一完成这项工作的解决方案。在我的情况下，用户最多可以上传 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);
			}	
			}			
		
			}
		}
		}
		};

于 2015-09-29T05:55:52.107 回答