javascript - FileReader's onloadend event is never triggered -

i'm trying make small snippet preview images before uploading them:

$.fn.previewimg=function($on){ var input = this;  try{     if (this.is("input[type='file']")) {         input.change(function(){             var reader = new filereader();              reader.onloadend = function(){                 (var = 0; < $on.length; i++) {                     if (/img/i.test($on[i].tagname)) $on[i].src = reader.result;                     else $on[i].style.bakgroundimage = "url("+reader.result+")";                 }             };         });     }else throw new exception("trying preview image element not file input!"); }catch(x){     console.log(x); } }; 

i'm calling like:

$("#file").previewimg($(".preview_img")); 

but onloadend function never called. fiddle

actually , got specify file , instruct filereader read it.

below corrected code.

$.fn.previewimg=function($on){     var input = this;      try{         if (this.is("input[type='file']")) {              input.change(function(evt){                  var reader = new filereader();                 console.log("input changed");                  reader.onloadend = function(){                     console.log("onloadend triggered");                     (var = 0; < $on.length; i++) {                         if (/img/i.test($on[i].tagname)) $on[i].src = reader.result;                         else $on[i].style.bakgroundimage = "url("+reader.result+")";                     }                 };                //get selected file                 var files = evt.target.files;                  //instruct reader read                 reader.readasdataurl(files[0]);             });         }else throw new exception("trying preview image element not file input!");     }catch(x){         console.log(x);     } };  $("#file").previewimg($(".preview_img"));