Javascript 文件阅读器'；s onloadend事件从未触发

我正在尝试制作一个小片段，以便在上载图像之前预览它们：

$.fn.previewImg=function($on){
var input = this;

try{
    if (this.is("input[type='file']")) {
        input.change(function(){
            var reader = new FileReader();

            reader.onloadend = function(){
                for (var i = 0; i < $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 to preview image from an element that is not a file input!");
}catch(x){
    console.log(x);
}
};

但是永远不会调用onloadend函数。

---

实际上，您需要指定文件并指示文件阅读器读取它

下面是正确的代码

$.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");
                    for (var i = 0; i < $on.length; i++) {
                        if (/img/i.test($on[i].tagName)) $on[i].src = reader.result;
                        else $on[i].style.bakgroundImage = "url("+reader.result+")";
                    }
                };
               //get the selected file
                var files = evt.target.files; 
                //instruct reader to read it
                reader.readAsDataURL(files[0]);
            });
        }else throw new exception("Trying to preview image from an element that is not a file input!");
    }catch(x){
        console.log(x);
    }
};

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

$.fn.previewImg=函数（$on）{
var输入=此；
试一试{
if（this.is（“输入[type='file']））{
输入。更改（功能（evt）{
var reader=new FileReader（）；
console.log（“输入已更改”）；
reader.onloadend=函数（）{
log（“onloadend触发”）；
对于（变量i=0；i<$on.length；i++）{
如果（/img/i.test（$on[i].tagName））$on[i].src=reader.result；
[i].style.bakgroundImage=“url”（“+reader.result+”）上的else$；
}
};
//获取所选文件
var files=evt.target.files；
//指导读者阅读
reader.readAsDataURL（文件[0]）；
});
}否则会引发新异常（“尝试预览非文件输入元素的图像！”）；
}捕获（x）{
控制台日志（x）；
}
};
$（“.preview\u img”）；

$.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");
                    for (var i = 0; i < $on.length; i++) {
                        if (/img/i.test($on[i].tagName)) $on[i].src = reader.result;
                        else $on[i].style.bakgroundImage = "url("+reader.result+")";
                    }
                };
               //get the selected file
                var files = evt.target.files; 
                //instruct reader to read it
                reader.readAsDataURL(files[0]);
            });
        }else throw new exception("Trying to preview image from an element that is not a file input!");
    }catch(x){
        console.log(x);
    }
};

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