javascript - Javascript FileReader onload が起動しない

Question

しばらく 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>

score 24 · Accepted Answer

セキュリティ上の理由から、そのようなローカルファイルを取得することはできません。

もう 1 つの根本的な問題は、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 ブラウザーでは機能しません

score 1 · Accepted Answer

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();

score 0 · Accepted Answer

私は同じ問題を抱えており、解決策を見つけました。ユーザーがアクセス許可を持っていない限り、ローカルファイルを読み取ることはできません。ページにを配置でき<input type="file">ます。ファイル入力が変化すると、データを読み取ることができます。

score -1 · Accepted Answer

何もうまくいきませんでした。以下に私の醜い解決策を見つけることができますが、仕事をしたのはそれだけでした。私の場合、ユーザーは最大 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);
			}	
			}			
		
			}
		}
		}
		};

javascript - Javascript FileReader onload が起動しない

4 に答える 4

Related

Reference