2013-12-16 2 views
0

мне нужна функциональность, в которой я загрузив изображение и проверить максимальный criteria.if изображений больше, то максимум критериев затем показать предупреждение Сообщразмера изображения, а затем проверить critera

alert("Height is bigger then our max criteria pls select image max height and width =etc"); 

Я в состоянии сделать все функциональные возможности, но когда я отправляю изображение, то я даю условие, чтобы показать выбранное изображение фактического Hight Width.and я получаю предыдущую высоту изображения ширины

моего coading является:

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link> 
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link> 
<script type="text/jquery"> 



    function readImage(file) { 

    var reader = new FileReader(); 
    var image = new Image(); 
    var maxh = 800; 
    var maxw = 800; 
    reader.readAsDataURL(file); 
    reader.onload = function (_file) { 
     image.src = _file.target.result; // url.createObjectURL(file); 
     image.onload = function() { 
      var w = this.width, 
       h = this.height, 
       t = file.type, // ext only: // file.type.split('/')[1], 
       n = file.name, 
       s = ~~ (file.size/1024) + 'KB'; 
      if (w > maxw && h > maxh) { 
       alert("Height is bigger then over max criteria pls select image max height and width           =2024X2024"); 
       alert(width); 
       alert(height); 
      } else { 


       $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
      } 

     }; 
     image.onerror = function() { 
      alert('Invalid file type: ' + file.type); 
     }; 
    }; 

} 
$("#choose").change(function (e) { 
    if (this.disabled) return alert('File upload not supported!'); 
    var F = this.files; 
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
}); 

</script> 



<style> 

    #uploadPreview img { 
    height:32px; 
} 

</style> 
</head> 
<body > 
<input type="file" id="choose" multiple="multiple" /> 
<br> 
<div id="uploadPreview"></div> 

</body> 
</html> 

Вопрос/проблема: каждый раз, когда я получаю предыдущий выбранный размер изображения, не текущее измерение изображения изображения.

Надеюсь, вы понимаете мой вопрос

+0

Я думаю, что проблема в моем дали Id.Because я получаю URL изображения из «бэ» и его идентификатора выбранного изображения, которые отображают в делах. вот почему он показывает предыдущее измерение изображения. Не так ли? – sonalgoyal

+0

Это потому, что вы проверяете ширину и высоту источника id = "blah", который не обновляется до конца. –

+0

то что такое альтернатива? – sonalgoyal

ответ

2

См THIS FIDDLE, важное изменение, что ваша логика wrong- вы проверяете высоту и ширину от ранее загруженного изображения (бэ), вы на самом деле нужно выполнить загрузку чтобы проверить свойства, а затем определить, какие действия предпринять.

Обратите внимание, что приведенный ниже/связанный пример принимает this answer on SO, отредактированный для ваших целей.

HTML

<input type="file" id="choose" multiple="multiple" /> 
<br> 
<div id="uploadPreview"></div> 

JS

function readImage(file) { 

    var reader = new FileReader(); 
    var image = new Image(); 
    var maxh = 800; 
    var maxw = 800; 
    reader.readAsDataURL(file); 
    reader.onload = function (_file) { 
     image.src = _file.target.result; // url.createObjectURL(file); 
     image.onload = function() { 
      var w = this.width, 
       h = this.height, 
       t = file.type, // ext only: // file.type.split('/')[1], 
       n = file.name, 
       s = ~~ (file.size/1024) + 'KB'; 
      if (w > maxw && h > maxh) { 
       alert("Height is bigger then over max criteria pls select image max height and width           =2024X2024"); 
       alert(width); 
       alert(height); 
      } else { 


       $('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>'); 
      } 

     }; 
     image.onerror = function() { 
      alert('Invalid file type: ' + file.type); 
     }; 
    }; 

} 
$("#choose").change(function (e) { 
    if (this.disabled) return alert('File upload not supported!'); 
    var F = this.files; 
    if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]); 
}); 
+0

его работа в скрипке, но не в моей странице html page.please проверьте, где проблема в моем coading.i добавлении кода в мой вопрос. – sonalgoyal

+0

, пожалуйста, проверьте приведенный выше код и сообщите мне, где проблема – sonalgoyal

Смежные вопросы