how does javascript FileReader know which file to read?

Question

Referring to this thread: Preview an image before it is uploaded

I would like to know how simply calling reader = new FileReader() lets FileReader know which file to read.

The thread link posted above works just fine for me, but when I try the following, FileReader() does not read the input. console.log returns nothing.

Javascript:

function fileReader(input){
  var reader = new FileReader();
  reader.onload = function(e){
    console.log(e.target.result);
  };
}

$(function(){
  $('#file').change(function(){
    fileReader(this);
  });
});

HTML:

<input id="file" type="file">

Why doesn't this work? Is there a way to manually give FileReader() which input DOM to read?

thanks for the question, I was starting to eat my nails because I also had the same question in my mind :) — schlingel, Jan 20 '16 at 07:28

score 1 · Accepted Answer · answered Jul 27 '13 at 12:15

1

I would like to know how simply calling reader = new FileReader() lets FileReader know which file to read.

It doesn't.

You missed this line from the answer of the question you linked to:

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

answered Jul 27 '13 at 12:15

Quentin

800,325
104
1,079
1,205

is there a reason why it is written after onload function? – Henry Cho Jul 27 '13 at 12:20
Setting event handlers before running operations that could trigger those event handlers is usual. – Quentin Jul 27 '13 at 12:38

how does javascript FileReader know which file to read?

1 Answers1