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'>"
}
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值