javascript - 两段 jQuery 代码，但只执行了一段

Question

我在 jQuery 中有两个函数。其中之一是从表单中查找图像扩展，另一个是获取图像尺寸，并在图像不够大时触发 alert()。

两个函数在演示中都正确执行，但一起只执行了一个。仅执行扩展获取的部分。抱歉代码太长，但这是显示问题的唯一方法。

(function ($) {
    $.fn.checkFileType = function (options) {
        var defaults = {
            allowedExtensions: [],
            success: function () {},
            error: function () {}
        };
        options = $.extend(defaults, options);

        return this.each(function () {
            $(this).on('change', function () {
                var value = $(this).val(),
                    file = value.toLowerCase(),
                    extension = file.substring(file.lastIndexOf('.') + 1);

                if ($.inArray(extension, options.allowedExtensions) == -1) {
                    options.error();
                    $(this).focus();
                } else {
                    options.success();
                }
            });
        });
    };
})(jQuery);

$("#filput").on('change', function () {
    var fr = new FileReader;

    fr.onload = function () { // file is loaded
        var img = new Image;

        img.onload = function () {
            // image is loaded; sizes are available 
            var w = img.width
            if (w < 500) {
                alert("too small");
            } else {
                alert("big enough");
            }
        };
        img.src = fr.result;
    };
    fr.readAsDataURL(this.files[0]);
});

$(function () {
    $('#filput').checkFileType({
        allowedExtensions: ['jpg', 'jpeg', 'png'],
        error: function () {
            alert('error');
        }
    });
});

Answer 1

Only part where extentions is getting is executed

该代码由 $(function() { ... }); 包装因此，您可能应该将这两段代码放在那里:

$(function() {
    $("#filput").on('change', function () {
        var fr = new FileReader;
        // ...
    });

    $('#filput').checkFileType({
        // ...
    });
});

根据您的描述，在您的代码运行时输入元素还不存在；通过将两个代码段放入 DOMReady 事件处理程序中，您可以确保它存在。