1

I'm trying to read a file using the fileReader method and the change event on JQuery. But for some reason it isn't working.

http://jsfiddle.net/vnrcdn1q/13/

What am I doing wrong?

$(document).ready(function(){
    $('input').on('change', function(e){

        var r = new FileReader();
        r.onload = function(e){
            console.log(r.result);
        };
    });
});

2 Answers 2

1

Could you please try this? You are not calling r.readAsText that is why your onload function is not being triggered.

$(document).ready(function(){
    $('input').on('change', function(evt){
        var f = evt.target.files[0]; 
        if (f){
        var r = new FileReader();
        r.onload = function(e){          
            console.log(e.target.result);
        };
            r.readAsText(f);
        } else 
        {
            console.log("failed");
        }
    });
});

http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=wZLjbp74Xxk

Other than readAsText, there are other methods that you can use depending on how you want the uploaded file to be read.

FileReader.readAsArrayBuffer()

Starts reading the contents of the specified Blob, once finished, the result attribute contains an ArrayBuffer representing the file's data.

FileReader.readAsBinaryString()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the raw binary data from the file as a string.

FileReader.readAsDataURL()

Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.

FileReader.readAsText()

Starts reading the contents of the specified Blob, once finished, the result attribute contains the contents of the file as a text string.

(Source: https://developer.mozilla.org/en/docs/Web/API/FileReader)

1
  • 1
    Thanks, that really helped :)
    – gespinha
    Sep 10, 2015 at 1:28
0

You forgot to tell the FileReader to actually try to read the file. So, after you set r.onload, you need to call r.readAsArrayBuffer(this.files[0]), r.readAsBinaryString(this.files[0]), r.readAsDataURL(this.files[0]), or r.readAsText(this.files[0]) depending on what type of data you're trying to get out of the file. See this MDN article on FileReader for descriptions of these different functions. Also, I would recommend wrapping all your FileReader code in a check to make sure there is at least one file selected. So, your code would look like:

$(document).ready(function(){
    $('input').on('change', function(e){
        if (this.files.length > 0){
            var r = new FileReader();
            r.onload = function(e){
                console.log(r.result);
            };
            // Call your chosen read function here
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.