js獲取上傳圖片尺寸和格式程式碼例項

本章節分享一段程式碼例項，它能夠實現判斷圖片型別和獲取圖片尺寸的功能。

感興趣的朋友可以做一下參考。

一.javascript程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$(".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();
    }
  }
});

二.css程式碼如下:

[CSS] 純文字檢視 複製程式碼
/* 該物件只用來在IE下獲得圖片的原始尺寸，無其它用途 */  
.preview_size_fake{ 
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
  height:1px;
  visibility:hidden; 
  overflow:hidden; 
  display:none;
}

三.html程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
<input class="head" type="file" name="avatar">
<img class="preview_size_fake" />