相容IE瀏覽器的判斷img圖片尺寸的程式碼

admin發表於2017-03-30
原文網址 : https://www.softwhy.com/article-5126-1.html
瀏覽器

在實際應用中，比如上傳網站的logo或者使用者頭像的時候，為了保證瀏覽器效果，可能會限制上傳的尺寸大小。

下面就是一段能夠實現相容IE瀏覽器的判斷功能，有需要的朋友可以做一下參考。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style>
.preview_size_fake{ 
/* 該物件只用來在IE下獲得圖片的原始尺寸，無其它用途 */
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
  height: 1px;
  visibility:hidden; 
  overflow: hidden; 
  display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $(".head").change(function() {
    var val = $(this).val();
    if(!val.match( /.jpg|.gif|.png|.bmp/i ) ){ 
      imgtype = false;
      alert('圖片格式無效！'); 
    }
        else{
      if (FileReader) {
        var reader = new FileReader(),
        file = this.files[0];
        reader.onload = function(e) {
          var image = new Image();
          image.src = e.target.result;
          image.onload=function(){
            if(image.width > 128 || image.height > 128){
              fill = false;
              alert("頭像尺寸應在128x128之間");
            } 
          }
        };
        reader.readAsDataURL(file);
      }
          else{
        //這是ie9版本
        $(".preview_size_fake").show();
        var objPreviewSizeFake = $(".preview_size_fake").get(0);
        var fileupload = $(this).get(0);
        fileupload.select();
        fileupload.blur();
        path = document.selection.createRange().text;
  
        if (/"\w\W"/.test(path)) {
          path = path.slice(1,-1);
        }
  
        objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path; 
        if(objPreviewSizeFake.offsetWidth > 128 || objPreviewSizeFake.offsetHeight > 128){
          fill = false;
          alert("頭像尺寸應在128x128之間");
        }
        document.selection.empty();
      }
    }
  });
})
</script>
</head>
<body>
<input class="head" type="file" name="avatar">
<img class="preview_size_fake" />
</body>
</html>


相關文章