javaScript 产生本地图片预览

//此为不按比例显示在固定区域内(td div img 标签中都OK 支持IE6以上版本)显示,
如:
<img id="img"  STYLE="visibility:hidden" height="100px" width="100px">
调用方法:onfocus=
"javascript:ShowImage(this.value,document.getElementById('img'))"   
<script language="javascript" type="text/javascript">
	//==============================
	//功能:Javascript本地图片预览
	//Date:2009-09-24
	//说明:简单的判断了文件的合法性
	//适用于:上传文件前预览本地图片
	//==============================
 	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>

//另一种是按图片比例压缩显示
//目前测试成功的只有IE浏览器,只能在标签(td和div中正常运行)如:
<td  valign="top" class="fontStyle" id="preview" >
调用方法:
<input type="file" id="userFile" style="width: 250px; font-size: 12px; color:#333333"; name="userFile" maxlength="400"
onchange="showPic()" />
function showPic()
{
var fileext=document.addSeal.userFile.value.substring(document.addSeal.userFile.value.lastIndexOf("."),document.addSeal.userFile.value.length)
        fileext=fileext.toLowerCase()
        if ((fileext!='.jpg')&&(fileext!='.gif')&&(fileext!='.png'))
        {
            alert("友情提示:请上传规定格式的图片,谢谢 !");
             document.addSeal.userFile.focus();
        }
        else
        {
        //alert(''+document.addSeal.userFile.value)//把这里改成预览图片的语句
  document.getElementById("preview").innerHTML="<img src='"+document.addSeal.userFile.value+"' width=120 style='border:6px double #ccc'>"
        }
}


你可能感兴趣的:(JavaScript,浏览器,IE,ext)