2013-08-30 12 views
7

Nie używam JavaScript od jakiegoś czasu i nie mogę odczytać pliku tekstowego i wyświetlić jego zawartość.Javascript FileReader onload nie odpala

Próbowałem już onload, a także onloadend. Jeśli po prostu wstawię reader.onload = alert('Hello');, ostrzeżenie zostanie wywołane, ale nie mogę uzyskać niczego, co zadziała z tą funkcją.

Nie do końca wiadomo, skąd się udać. Próbowałem już zdefiniować funkcję po reader.onload = function(evt)..., ale to nie działa.

Próbowałem również w Safari 6.0.5 i 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> 
+0

Więc używasz tego kodu w przeglądarce? Próbujesz odczytać plik lokalny z systemu? Jestem prawie pewien, że przeglądarka uniemożliwia ci to. Co mówi twoja konsola przeglądarki? –

+0

Konsola błędów nic nie mówi. Nie w Safari. –

Odpowiedz

11

Z tego powodu nie można pobrać lokalnego pliku z tego powodu.

Innym istotnym problemem jest to, że readAsText (i wszystkie funkcje odczytu) wymagają zawartości pliku, a nie ścieżki/nazwy pliku. Możesz pobrać to z kolekcji plików typu input = "file". Oto w jaki sposób kod może działać:

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]); 
}; 

Oto jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/

Uwaga: ten kod nie działa w przeglądarce Safari

+0

awww mnie biłeś do tego! – Funkyguy

+0

"reader.onload = readSuccess;" Czy "readSuccess" nie powinno brzmieć "readSuccess()"? –

+1

Nie, przypisałoby to "niezdefiniowane", które jest wartością zwracaną przez funkcję. –

1

można użyć ajax, aby uzyskać zawartość Twój plik:

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

Nic dla mnie nie działało. Poniżej znajduje się moje brzydkie rozwiązanie, ale to jedyny, który wykonał zadanie. W moim przypadku użytkownik może przesłać do 3 plików, więc var iPDF może wynosić 0,1,2.

\t var iPDF=UpdatedExistingNumberOfPDFfiles; 
 
\t if (iPDF < NoMaxPDFfiles) { 
 
\t \t var reader = new FileReader(); 
 
\t \t reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); 
 
\t \t reader.onload = function(){ 
 
\t \t var PDFdataURL = reader.result; 
 
\t \t var xhr = new XMLHttpRequest(); 
 
\t \t xhr.open("POST", "Observation_PDFUpload.php",true); 
 
\t \t xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
\t \t var NumberOfPDFfile = iPDF+1; 
 
\t \t xhr.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); 
 
\t \t iPDF++; 
 
\t \t if (iPDF < NoMaxPDFfiles) { 
 
\t \t \t reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); 
 
\t \t \t reader.onload = function(){ 
 
\t \t \t PDFdataURL = reader.result; 
 
\t \t \t var xhr1 = new XMLHttpRequest(); 
 
\t \t \t xhr1.open("POST", "Observation_PDFUpload.php",true); 
 
\t \t \t xhr1.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
\t \t \t NumberOfPDFfile = iPDF+1; 
 
\t \t \t xhr1.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); 
 
\t \t \t iPDF++; \t 
 
\t \t \t if (iPDF < NoMaxPDFfiles) { 
 
\t \t \t reader.readAsDataURL(files[iPDF-UpdatedExistingNumberOfPDFfiles]); 
 
\t \t \t reader.onload = function(){ 
 
\t \t \t PDFdataURL = reader.result; 
 
\t \t \t var xhr2 = new XMLHttpRequest(); 
 
\t \t \t xhr2.open("POST", "Observation_PDFUpload.php",true); 
 
\t \t \t xhr2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 
\t \t \t NumberOfPDFfile = iPDF+1; 
 
\t \t \t xhr2.send("PDFfileURL="+PDFdataURL+"&PDFfileName="+PDFfileName+"-Annex-"+NumberOfPDFfile); 
 
\t \t \t } \t 
 
\t \t \t } \t \t \t 
 
\t \t 
 
\t \t \t } 
 
\t \t } 
 
\t \t } 
 
\t \t };

-1

Mam ten sam problem i znalazłem rozwiązanie. Nie można odczytać pliku lokalnego, chyba że użytkownik ma uprawnienia. Możesz umieścić na swojej stronie <input type="file">. Po zmianie danych wejściowych można odczytać dane.