2013-12-16 36 views
0

我需要一個功能:在我正在上傳圖片並檢查最大criteria.if圖像是更大然後最高標準則顯示警告味精尺寸,然後檢查性判據

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

我能夠做的所有功能,但是當我上傳的圖片,然後我給的條件,以顯示所選圖像實際海特的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我得到的「嗒嗒」和選擇的圖像顯示其在股利其ID的圖像URL問題。這就是爲什麼它顯示以前的圖像尺寸。不是嗎? – sonalgoyal

+0

這是因爲您正在檢查id =「blah」源的寬度和高度,直到後來才更新。 –

+0

那麼什麼是替代? – sonalgoyal

回答

2

THIS FIDDLE,重要的變化是,你的邏輯是錯 - 你檢查對先前上傳的圖像(等等)的高度和寬度,你實際上需要執行上傳檢查屬性 - 然後確定要採取的操作。

請注意,下面的/鏈接的例子需要編輯爲您的目的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頁面中。請檢查我的coading.i中的問題在我的問題中添加代碼的位置。 – sonalgoyal

+0

請檢查上面的代碼,並告訴我問題在哪裏 – sonalgoyal