Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript FileReader onload not firing

Tags:

I haven't used JavaScript in a while and I can't seem to read a text file and display the contents.

I've tried onload as well as onloadend. If I just put reader.onload = alert('Hello'); the alert fires, but I can't get anything to work with the function.

Not exactly sure where to go from here. I've tried defining the function after reader.onload = function(evt)... but that doesn't work.

I've tried in Safari 6.0.5 and Chrome as well.

<!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> 
like image 448
Cody B Avatar asked Aug 30 '13 23:08

Cody B


1 Answers

You can't grab a local file like that for security reasons.

Another underlying problem is that readAsText (and all the read functions) need the file's content and not its file path/name. You can grab this from the files collection of the input type="file" element. Here is how your code could work:

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

Here is the jsfiddle: http://jsfiddle.net/fstreamz/ngXBV/1/

Note: this code not work in safari browser

like image 173
LUKE Avatar answered Sep 21 '22 01:09

LUKE