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

只执行扩展的部分

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

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

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

根据您所描述的内容，在您的代码运行时，输入元素尚未出现;通过将两个代码段放在DOMReady事件处理程序中，您可以确保它存在。

两个jQuery代码，但只执行了一个

1 个答案: