2014-02-23 28 views
1

我在jQuery中有兩個函數。其中一個從窗體中查找圖像擴展,另一個獲取圖像尺寸並在圖像不夠大時觸發alert()兩個jQuery代碼,但只執行一個

這兩個函數都在演示中正確執行,但一起只執行一個。只執行擴展名所在的部分。對不起,代碼的長度,但它是唯一的方式來顯示問題。

(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'); 
     } 
    }); 
}); 
+0

你已經在'success:function(){},' – user3256987

+0

上放了一個額外的符號是的,代碼中沒有它。它的應對因素 – Baltrek

回答

1

只有在一些推廣是越來越被執行

該代碼是由$(function() { ... });這樣結束,你應該把代碼有兩件部分:基於

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

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

你所描述的,輸入元素在代碼運行時還沒有出現;通過將這兩個代碼段放入DOMReady事件處理程序中,您可以確保它存在。

相關問題