使用當前代碼製作jquery警報框

我正在嘗試製作jquery警告框，但似乎沒有任何效果。下面是代碼使用當前代碼製作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像素高，如果在更大的尺寸，我們顯示警報。這裏是uggly警報

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

這裏使用的第一行代碼

注意代碼的相當不錯警報：代碼以下行無關，我的代碼DO，它只是顯示NICE警報，但必須實現以某種方式與我的代碼

<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

這裏是我試過，但沒有工作，混合兩個代碼

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

來源

2016-07-18 Kamikaza

無法找到名稱的任何DOM'domain' – brk

編輯的問題，這個域名代碼是漂亮的警告框的例子，該代碼必須以某種方式混合我的uggly警報代碼 – Kamikaza

你是否包括jquery以及jquery-ui？你有任何控制檯錯誤？發生了什麼/沒有發生？ –

檢查這些

1.You擁有的所有元素在HTML中使用相同的ID，並在腳本#productos中將其命名爲文件

2.確保#file位於ID爲productos的表單中

個

3.As每

上傳圖片完全相同200像素寬200像素高，如果在更大的尺寸，我們顯示警報。

，但你有這個條件

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

這是錯誤的，因爲它允許任何圖像下面200x200px大小，而不是僅僅200x200px，正確的條件是

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

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

來源

2016-07-18 05:28:18 Viney

你的回答是正確的，但我現在看到了問題。我正在使用Jquery 2，它看起來像DIV對話框只與JQuery 1兼容。是嗎？ – Kamikaza

版本依賴關係退出但只爲jQuery提供任何舊的jqueryui，您可以始終使用最新的jQuery沒有任何問題，但它不是真正的另一個方向，即你不能使用最新的jqueryui與舊的jquery，所以我想在這裏使用jquery 2可能不是問題。你可以看到[這裏]（https://api.jqueryui.com/）支持哪個版本。 – Viney

我想你在代碼中有一些錯誤

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

來源

2016-07-18 05:36:56 sumitkanoje

使用當前代碼製作jquery警報框

回答

相關問題