Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashu Singh
Ashu Singh
Courses Plus Student 38 Points

Please explain me this code

Hey please explain this code and how it works 

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                alert(e.target.result);
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#imgInp").change(function(){
        readURL(this);
    });
miikis
miikis
44,957 Points

Hi Ashu,

What exactly do you not understand about the code?

Ashu Singh
Ashu Singh
Courses Plus Student 38 Points

what e.target.result here ?

1 Answer

miikis
miikis
44,957 Points

So there's this FileReader object that you can use to load local files into your browser. That FileReader object also has a property called onload that you can attach an event-listener too. That event-listener is just a regular anonymous function that, once it's called, will be passed an Event object. That Event object contains a property called target that itself is an object. Finally, that target object contains a property called result that holds the actual data that you uploaded. And, in case it's not clear, the onload handler fires once the file has finished loading.

Let me know if that makes sense to you.