Получить размеры изображения (перед загрузкой)

Question

в проекте, над которым я работаю. Перед загрузкой мне нужно проверить размеры изображения (ширину и высоту).

мне нужно 3 контрольные точки

1-> если размеры меньше, чем 600 X 600 пикселей не принимают загрузки

1->, если размеры более 600 х 600 пикселей и менее 1200 X 1200 пикселов принимать с предостерегавшее качество не является хорошим и

3-> если размеры Hier чем 1200 X 1200 пикселов, принимают ...

у меня есть код, который вы видите .. но есть два вопроса 1, когда изображение 550X700 возвращает accepta BLE с предупреждением, это должно быть не приемлемо ... и второй вопрос, когда я пытаюсь изменить образ она сохраняет также старые значения .. пожалуйста, проверьте код: jsfiddle

$("#file").change(function() { 
    var file, img; 
    if ((file = this.files[0])) { 
     img = new Image(); 
     /* img.onload = function() { 
      alert(this.width + " " + this.height); 
     }; 
     img.onerror = function() { 
      alert("not a valid file: " + file.type); 
     }; 
     img.src = _URL.createObjectURL(file); */ 
    } 
    if ((file = this.files[0])) { 
     img = new Image(); 

     img.onload = function() { 
     //green 
      if (this.width > 1200 && this.height > 1200){ 
      $('.text1').css('visibility', 'visible'); 
      $('.text1').append(this.width + "X & " + this.height+ "Y"); 
      $(".grey").addClass("green"); 
      $('.textgreen').css('visibility', 'visible') 
      } 
     //red 
      else if ((this.width < 600) && (this.height < 600)){ 
      $('.text1').css('visibility', 'visible'); 
      $('.text1').append(this.width + "X & " + this.height+ "Y"); 
      $(".btn.btn-success.btn-xs").remove(); 
      $(".grey").addClass("red"); 
      $('.textred').css('visibility', 'visible'); 
      } 
     //yellow 
      else if (($(this.width > 600) && $(this.width <1200)) && ($(this.height > 600) && $(this.height <1200))){ 
      $('.text1').css('visibility', 'visible'); 
      $('.text1').append(this.width + "X & " + this.height+ "Y"); 
      $(".grey").addClass("yellow"); 
      $('.textyellow').css('visibility', 'visible') 
      } 
      else { 
      return; 
      } 


     }; 
     img.src = _URL.createObjectURL(file); 


    } 

});` 

Answer 1

При изменении изображения, old values все еще там, потому что вы - appending новый текст. Вам нужно заменить старый. Поэтому, чтобы это было легко, я добавил пустой span и вместо добавления нового текста я просто заменил его.

То же самое происходит с цветом фона и «качественными текстами». Вам нужно удалить другие классы и добавить новый.

И ваша первая проблема заключается в том, что вы используете оператор && во втором if. Вы должны изменить его на ||.

HTML

<input type="file" id="file" /> 
<div class="grey"> 
    <p class="text1">Image Dimensions : <span></span></p> 
    <p class="textred">File quality is very low we can not accept this image 
    <br><strong>Please select an other image</strong> </p> 
    <p class="textyellow">file quality is accepteble but not high</p> 
    <p class="textgreen">file quality is high</p> 
    <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess"> 
    Upload 
    </button> 
</div> 

JQuery

... 
img.onload = function() { 
    //green 
    if (this.width > 1200 && this.height > 1200) { 
     $('.text1').css('visibility', 'visible'); 
     $('.text1 span').text(this.width + "X & " + this.height + "Y"); 
     $(".grey").removeClass('red yellow').addClass("green"); 
     $('.textred, .textyellow').css('visibility', 'hidden'); 
     $('.textgreen').css('visibility', 'visible'); 
    } 
    //red 
    else if ((this.width < 600) || (this.height < 600)) { 
     $('.text1').css('visibility', 'visible'); 
     $('.text1 span').text(this.width + "X & " + this.height + "Y"); 
     $(".btn.btn-success.btn-xs").remove(); 
     $(".grey").removeClass('green yellow').addClass("red"); 
     $('.textgreen, .textyellow').css('visibility', 'hidden'); 
     $('.textred').css('visibility', 'visible'); 
    } 
    //yellow 
    else if (($(this.width > 600) && $(this.width < 1200)) && ($(this.height > 600) && $(this.height < 1200))) { 
     $('.text1').css('visibility', 'visible'); 
     $('.text1 span').text(this.width + "X & " + this.height + "Y"); 
     $(".grey").removeClass('green red').addClass("yellow"); 
     $('.textgreen, .textred').css('visibility', 'hidden'); 
     $('.textyellow').css('visibility', 'visible'); 
    } else { 
     return; 
    } 
}; 
... 

JSFiddle