JS实时预览上传图片缩略图

实现代码一：

<script language=JavaScript>
var flag=false;
function DrawImage(ImgD){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= 120/80){
     if(image.width>120){  
     ImgD.width=120;
     ImgD.height=(image.height*120)/image.width;
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    else{
     if(image.height>80){  
     ImgD.height=80;
     ImgD.width=(image.width*80)/image.height;     
     }else{
     ImgD.width=image.width;  
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    }
   /**//**//**//*else{
    ImgD.src="";
    ImgD.alt=""
    }*/
   } 

function FileChange(Value){
flag=false;
document.all.uploadimage.width=10;
document.all.uploadimage.height=10;
document.all.uploadimage.alt="";
document.all.uploadimage.src=Value;
}

function BeforeUpLoad(){
if(flag) alert("OK");else alert("FAIL");
}
</script>
<INPUT style="WIDTH: 143px; HEIGHT: 18px" type=file size=8 name=pic onchange="javascript:FileChange(this.value);"> 
<IMG id=uploadimage height=10 width=10 src=""  onload="javascript:DrawImage(this);" ><BR>
<Button onclick="javascript:BeforeUpLoad();">提交</Button>

实现代码二：

<input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('img'))">
<br />
<img id="img"  STYLE="visibility:hidden" height="100px" width="100px">

<script language="javascript" type="text/javascript">
    
     function ShowImage(value,img)
    {
            //alert(value);
            //检测盘符
            //alert(value.indexOf(':'));
            //检测文件是否有扩展名
            //alert(value.length-value.lastIndexOf('.'));
            //取文件扩展名
            //alert(value.substr(value.length-3,3));
            //检测文件扩展名是否合法
            //alert(CheckExt(value.substr(value.length-3,3)));
            
        if(value.length>5&&value.indexOf(':')==1&&        (value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3)))
        {
            img.src=value;
            img.alt="本地图片预览";
            img.style.visibility="visible";
        }
        else
        {
                    img.style.visibility="hidden";
              }
    }
    //检查扩展名是否合法,合法返回True
    function CheckExt(ext)
    {
        //这里设置允许的扩展名
        var AllowExt="jpg|gif|jpeg|png|bmp";
        var ExtOK=false;
            var ArrayExt;
            if(AllowExt.indexOf('|')!=-1)
            {
                ArrayExt=AllowExt.split('|');
                for(i=0;i<ArrayExt.length;i++)
                {
                    if(ext.toLowerCase()==ArrayExt[i])
                    {
                        ExtOK=true;
                        break;
                    }
                }
            }
            else
            {
                ArrayExt=AllowExt;
                if(ext.toLowerCase()==ArrayExt)
                {
                    ExtOK=true;
                }
            }
            return ExtOK;
    }
</script>