Question

我遇到了简单的文件输入问题。我试图获取多个图像的宽度，高度和dataURL并将它们保存到全局变量中，但保存的所有内容都是＆＃34;未定义＆＃34;。

当我试图制作一个＆＃34;演示小提琴＆＃34; ＆＃34; onchange＆＃34; -event似乎无法解雇。

任何人都可以帮助我吗？

这里是演示小提琴的代码：

    var WIDTH = [];
    var HEIGHT = [];
    var SRC = [];

    $(window).load(function()
    {
    grabData();
    displayImgs();
});

function grabData()
    {   
        $("#fileInput").on("change",function(e)
        {
            var file = e.target.files; 

            for(var i = 0; i<file.length; i++)
            {
                var reader= new fileReader();
                var img = new Image();

                reader.onload = function(e)
                {
                    SRC = e.target.result;
                    img.onload = function() 
                    {
                        WIDTH = this.width;
                        HEIGHT = this.height;
                    }
                }
                reader.readAsDataURL(file);
                console.log(WIDTH);
            }
            console.log(WIDTH);
        });
    }
function displayImgs()
{
    /*display images*/
    for(var i = 0; i<SRC.length; i++)
    {
        $("body").append("<img src="+SRC[i]+" width="+WIDTH[i]+" height="+HEIGHT[i]+">");
    }
}

Answer 1

尝试以下代码，在小提琴和工作中进行测试 - http://jsfiddle.net/02468Lr9/

var WIDTH = [];
var HEIGHT = [];
var SRC = [];

$(document).ready(function() {
    grabData();
    ;
});

function grabData() {   
    $("#fileInput").on("change",function(e) {
        var file = e.target.files; 

        for(var i = 0; i<file.length; i++) {
            var reader= new FileReader();
            var img = new Image();

            reader.onload = function(e) {
                SRC.push(e.target.result);
                img.onload = function() {
                    alert(this.width);
                    WIDTH.push(this.width);
                    HEIGHT.push(this.height);

                    displayImgs();
                }

                img.src = e.target.result;
            }

            reader.readAsDataURL(file[i]);            
        }
    });
}
function displayImgs()
{
    /*display images*/
    for(var i = 0; i<SRC.length; i++)  {
        console.log(WIDTH);
        $("body").append("<img src="+SRC[i]+" width="+WIDTH[i]+" height="+HEIGHT[i]+">");
    }
}

Answer 2

日志结果是未定义的，因为您将其记录在onload函数之外，并且因为它在图像加载之前运行并且值仍未定义。

将输入数据保存到全局变量

2 个答案: