用当前代码制作一个 jquery 警报框答案

【问题标题】：Making a jquery alert box with current code用当前代码制作一个 jquery 警报框
【发布时间】：2016-07-18 13:36:56
【问题描述】：

我正在尝试制作一个 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>

现在这是一个带有许多输入文本的长表单，如果我们显示警报的尺寸更大，则上传精确为 200 像素宽度和 200 像素高度的图像。这是丑陋的警报

$(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/

【问题讨论】：

找不到任何名称为domain的DOM
已编辑问题，此域名代码是漂亮警报框的示例，此代码必须以某种方式与我的丑陋警报代码混合
你包括 jquery 以及 jquery-ui 吗？你有任何控制台错误吗？发生了什么/没有发生什么？

标签： javascript jquery css html

【解决方案1】：

检查这些

1.您在 HTML 中拥有所有具有相同 id 的元素，就像您在脚本 #productos ,file 中命名它们一样

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

3.根据

如果尺寸更大，我们会显示警报，请上传 200 像素宽度和 200 像素高度的图像。

但你有这种情况

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

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

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

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

【讨论】：

您的答案是正确的，但我现在看到了问题。我正在使用 Jquery 2，似乎对话框 DIV 仅与 Jquery 1 兼容。是吗？
好吧，版本依赖项确实存在，但仅适用于 jquery，因此对于任何旧的 jqueryui，您始终可以毫无问题地使用最新的 jquery，但另一个方向并非如此，即您不能将最新的 jqueryui 与旧的 jquery 一起使用所以我认为在这里使用 Jquery 2 可能不是问题。您可以查看here 支持的版本。

【解决方案2】：

我猜你的代码有一些错误

$(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(); 
        console.log('form.submit');
        }
    });
});

查看http://jsfiddle.net/8cypx/270/

【讨论】：