与 fileReader Javascript 的结果并不总是相同答案

【问题标题】：not always same result with fileReader Javascript与 fileReader Javascript 的结果并不总是相同
【发布时间】：2014-09-19 09:10:48
【问题描述】：

我正在使用 fileReader 来检查上传的个人资料图片是否符合我的条件。但是，我并不总是有相同的结果。你能帮我修复那个错误吗？

这是我的 htlm 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>File API</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="page-wrapper">

        <h1>Image File Reader</h1>
        <div>
            Select an image file: 
            <input type="file" id="fileInput">
        </div>

    </div>

    <script src="images.js"></script>
</body>
</html>

这是我的 javascript/fileReader (images.js) 代码：

window.onload = function() 
{
    var width=0;
    var height=0;
    var exten= false;
    var size = false;

    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');


    fileInput.addEventListener('change', function(e) 
    {
        var file = fileInput.files[0];
        var imageType = /image.png/;

        if (file.type.match(imageType)) 
        {
            exten = true;
            var reader = new FileReader();

            reader.onload = function(e) 
            {
                var img = new Image();
                img.src = reader.result;

                img.onload = function()
                {
                    width=this.width;
                    height=this.height;
                }
            }

            reader.readAsDataURL(file); 
        } 
        else 
        {
            exten= false;
        }

        if(width == 50 && height ==50)
        {
            size = true;
        }
        else
        {
            size = false;
        }

        //Here, we check that the image matches with png and 50*50px
        if(size && exten)
        {
            alert('Your image is ok.');
        }
        else
        {
            if(!size && !exten)
            {
                alert('Image needs to be 50*50px and in png');
            }
            else
            {
                if(!size && exten)
                {
                    alert('Image needs to be 50*50px');
                }
                else
                {
                    if(size && !exten)
                    {
                        alert('Image needs to be in png');
                    }
                }
            }
        }
    });
}

感谢您的帮助

【问题讨论】：

标签： javascript image input filereader

【解决方案1】：

在检查width 和height 之前，您必须等待img.onload 事件的执行。

应该将在该事件处理程序之外并使用这些属性的代码移到其中。

【讨论】：