2013-08-30 25 views
7

Tôi đã không sử dụng JavaScript trong một thời gian và dường như tôi không đọc được tệp văn bản và hiển thị nội dung.Javascript FileReader tải không bắn

Tôi đã thử onload cũng như onloadend. Nếu tôi chỉ cần đặt reader.onload = alert('Hello'); các cảnh báo cháy, nhưng tôi không thể nhận được bất cứ điều gì để làm việc với chức năng.

Không biết chính xác nơi cần đi từ đây. Tôi đã cố gắng xác định chức năng sau reader.onload = function(evt)... nhưng điều đó không hoạt động.

Tôi cũng đã thử trong Safari 6.0.5 và 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

Vì vậy, bạn đang chạy mã này trong trình duyệt? Bạn đang cố đọc tệp cục bộ khỏi hệ thống của mình? Tôi khá chắc chắn rằng trình duyệt ngăn bạn làm điều đó. Bảng điều khiển trình duyệt của bạn cho bạn biết điều gì? –

+0

Bàn điều khiển lỗi không nói bất cứ điều gì. Không có trong Safari. –

Trả lời

11

Bạn không thể lấy tệp cục bộ như vậy vì lý do bảo mật.

Một vấn đề cơ bản khác là readAsText (và tất cả các hàm đọc) cần nội dung của tệp và không phải tên/tên tệp của nó. Bạn có thể lấy từ bộ sưu tập tệp của phần tử input type = "file". Sau đây là cách mã của bạn có thể làm việc:

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

Đây là jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/

Lưu ý: mã này không hoạt động trong trình duyệt Safari

+0

awww bạn đánh tôi với nó! – Funkyguy

+0

"reader.onload = readSuccess;" Không nên 'readSuccess' là 'readSuccess()'? –

+1

Không, nó sẽ gán "không xác định" là giá trị trả về của hàm. –

1

bạn có thể sử dụng ajax để có được nội dung của tệp của bạn:

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

Không có gì hiệu quả đối với tôi. Dưới đây bạn có thể tìm thấy giải pháp xấu xí của tôi, nhưng đó là giải pháp duy nhất đã thực hiện công việc. Trong trường hợp của tôi, người dùng có thể tải lên tối đa 3 tệp, do đó, biến iPDF có thể là 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

Tôi có cùng một vấn đề và tôi tìm thấy một giải pháp. Bạn không thể đọc tệp cục bộ trừ khi người dùng có quyền. Bạn có thể đặt <input type="file"> trên trang của mình. Khi thay đổi đầu vào của tệp, bạn có thể đọc dữ liệu.

Các vấn đề liên quan