js實現本地圖片預覽

function previewImage(obj)
    {
      if (checkFiles(obj.value)){
          var file= obj;
          var MAXWIDTH  = 155;
          var MAXHEIGHT = 95;
          var parent = obj.parentNode;
          var divpreviewid = parent.getElementsByTagName("div")[0].id;
          var imghead = divpreviewid+imghead;
          var div = document.getElementById(divpreviewid);
          if (file.files && file.files[0])
             {
              div.innerHTML = '<img id='+imghead+'>';
              var img = document.getElementById(imghead);
              img.onload = function(){
                     var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                     //alert("寬度："+img.width+"  高度："+img.height);
                     img.width = rect.width;
                     img.height = rect.height;
                     img.style.marginLeft = rect.left+'px';
                     img.style.marginTop = rect.top+'px';
                  }
            var reader = new FileReader();
            reader.onload = function(evt){img.src = evt.target.result;}
            reader.readAsDataURL(file.files[0]);
         }
         else
           {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id='+imghead+'>';
            var img = document.getElementById(imghead);
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id="+imghead+" style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
          }
     }
     else{
         var parent = obj.parentNode;
         //alert(parent.getElementsByTagName("input")[0].id);
         parent.getElementsByTagName("input")[0].value="";
     }
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
    var param = {top:0, left:0, width:width, height:height};
    if( width>maxWidth || height>maxHeight )
    {
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;
        
        if( rateWidth > rateHeight )
        {
            param.width =  maxWidth;
            param.height = Math.round(height / rateWidth);
        }else
        {
            param.width = Math.round(width / rateHeight);
            param.height = maxHeight;
        }
    }
    
    param.left = Math.round((maxWidth - param.width) / 2);
    param.top = Math.round((maxHeight - param.height) / 2);
    return param;
}

function checkFiles(str, exStr) {
            if (typeof (exStr) == 'undefined')
                exStr = ".jpg|.png|.gif|.jpeg";
            var strRegex = "(" + exStr + ")$"; //用於驗證圖片擴展名的正則表達式
            var re = new RegExp(strRegex);
            if (re.test(str.toLowerCase())) {
                return true;
            }
            else {
                alert("文件名不合法,文件的擴展名必須爲" + exStr + "格式");
                return false;
            }
        }