FileReader'的onloadend事件永远不会被触发

FileReader's onloadend event is never triggered

本文关键字：永远 事件 onloadend FileReader      更新时间：2023-09-26

我想在上传图像之前制作一个小片段来预览它们:

$.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);
}
};

我这样称呼它:

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

但是onloadend函数永远不会被调用。小提琴

实际上，您必须指定文件并指示fileReader读取它

下面是更正后的代码。

$.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"));
相关文章：