使用当前代码创建一个jquery警报框 [英] Making a jquery alert box with current code

问题描述

我想让一个jquery警报框，但没有什么似乎工作。这是代码

 < link rel =stylesheethref =http://code.jquery.com/ui /1.8.21/themes/base/jquery-ui.csstype =text / cssmedia =all/> 
< div id =dialogtitle =注意！ style =display：none> 
这里我们显示警报
< / div> 
  

现在这里是一个长形式，许多输入文本是上传图像完全200px宽度和200px高度如果更大的尺寸我们显示警报。这是ugicy警告

  $（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这是一个错误的提示TO CHANGE'）;} 
}; 
} else {form.submit（）;} 
}）; 
}）; 
  

这是使用第一行代码的漂亮警报的代码

注意：以下代码行没有使用我的代码，它显示了一个很好的提示，但必须用我的代码实现

 < script> 
 function check_domain_input（）
 {
 $（#dialog）.dialog（）; //显示新的警报框。 
 
 var domain_val = document.getElementsByName（'domain'）; 
 
 if（domain_val [0] .value.length> 0）
 {
 return true; 
} 
 
 $（#dialog）.dialog（）; 
 
 return false; 
} 
< / script> 
  

END

但不工作，混合两个代码

  $（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（）; 
} //这里我需要做一些事情，但我不知道
 
}; 
} else {form.submit（）; } 
}）; 
}）; 
  

这是我从网上得到的工作演示警报，但我需要混合两个代码，工作

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

解决方案

检查这些

1。您在HTML中具有相同ID的所有元素，您在脚本#productos，文件中命名它们

2.确保#file位于id为productos的表单

3.按照

上传图片时，宽度必须为200像素，

> if（width< = 200&& height< = 200）


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

  if width == 200&& height == 200）
  

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

I am trying to make a jquery alert box but nothing seems to works. Here is the code

<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>

now here is a long form with many input texts on of them is to upload image exactly 200px width and 200px height if bigger in dimension we show alert. Here is the uggly alert

$(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(); }
    });
});

Here is the code to the pretty nice alert using the first lines of code

NOTE: THE FOLLOWING LINES OF CODE HAS NOTHING TO DO WITH MY CODE, IT JUST SHOW A NICE ALERT BUT MUST BE IMPLEMENTED IN SOME WAY WITH MY CODE

<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>

END

Here is what I tried but is not working, mixing both codes

$(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(); }
    });
});

Here is the working demo alert I got from the net but I need to mix both codes to make it work

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

解决方案

Check these

1.You have all elements with same id in the HTML as you name them in script #productos ,file

2.Make sure #file is inside the form with id productos

3.As per

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

but you have this condition

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

which is wrong since it allows any image with size below 200x200px and not just 200x200px , the correct condition is

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

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

这篇关于使用当前代码创建一个jquery警报框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！