javascript - 使用当前代码制作一个 jquery 警告框

Question

我正在尝试制作一个 jquery 警告框，但似乎没有任何效果。这是代码

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all" />
<div id="dialog" title="Attention!" style="display:none">
    here we show the alert
</div>

现在这里有一个长表格，上面有许多输入文本，如果尺寸更大，我们会显示警报，上传图像正好是 200px 宽度和 200px 高度。这是丑陋的警报

$(document).ready(function () {
    $("#productos").submit(function (e) {
        var form = this; e.preventDefault();
        var fileInput = $(this).find("#file")
        [0], file = fileInput.files && fileInput.files[0]; console.log(file)
        if (file) {
            var img = new Image();
            img.src = window.URL.createObjectURL(file);
            img.onload = function () {
                var width = img.naturalWidth, height = img.naturalHeight;
                window.URL.revokeObjectURL(img.src);
                if (width <= 200 && height <= 200) { form.submit(); } else
                { alert('THIS IS AN UGGLY ALERT WE WANT TO CHANGE'); }
            };
        } else { form.submit(); }
    });
});

这是使用第一行代码的非常好的警报代码

注意:以下代码行与我的代码无关，它只是显示一个很好的警告，但必须以某种方式与我的代码一起实现

<script>
    function check_domain_input()
    {        
        $( "#dialog" ).dialog(); // Shows the new alert box.

        var domain_val = document.getElementsByName('domain');

        if (domain_val[0].value.length > 0)
        {
            return true;
        }

        $( "#dialog" ).dialog();

        return false;
    }
</script>

结束

这是我尝试过但没有用的方法，混合了两种代码

$(document).ready(function () {
    $("#productos").submit(function (e) {
        var form = this; e.preventDefault(); var fileInput = $(this).find("#file")[0],
        file = fileInput.files && fileInput.files[0]; console.log(file)
        if (file) {
            var img = new Image(); img.src = window.URL.createObjectURL(file);
            img.onload = function () {
                var width = img.naturalWidth, height = img.naturalHeight;
                window.URL.revokeObjectURL(img.src);
                if (width <= 200 && height <= 200) {
                    form.submit();
                } else {
                    $("#dialog").dialog();
                } //here I need to do something but I do not know what

            };
        } else { form.submit(); }
    });
});

这是我从网上获得的工作演示警报，但我需要混合使用这两种代码才能使其工作

http://jsfiddle.net/8cypx/12/

Answer 1

检查这些

1.您在 HTML 中拥有与您在脚本 #productos ,file 中命名的相同 id 的所有元素

2.确保#file在id为productos的表单中

3.根据

upload image exactly 200px width and 200px height if bigger in dimension we show alert.

但是你有这个条件

     if (width <= 200 && height <= 200)

这是错误的，因为它允许任何尺寸小于 200x200px 而不仅仅是 200x200px 的图像，正确的条件是

     if (width == 200 && height == 200)

http://jsfiddle.net/8cypx/269/