<input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('pimg'))">
<br />
<img id="pimg" style="visibility:hidden" height="100px" width="100px">
<script language="javascript" type="text/javascript">
//==============================
//功能: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>
分享到:
相关推荐
图片上传本地预览插件
此工程下页面test.jsp为图片选中预览功能实现
上传图片本地预览效果,选择图片就可在页面上看到
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小,ie下目前是采用ActiveXObject方法,但会弹框提示,不友好,提供ajax方式后台判断文件大小。 4 判断图片类型...
使用jquery上传前,预览图片,裁剪,示例使用php接收上传的文件,并且保存为裁剪后的图片。不需要上传后再裁剪图片,只需要本地裁剪好即可,裁剪的时候也可以旋转图片。
Jquery 表单验证+本地图片上传-切割-预览 完全项目 希望不要用于商业用途
实现了在ie8 的图片上传预览失败的功能,
html5图片上传本地生成缩略图预览
在网上找到一个高手写本地图片上传预览的插件,测试通过ie6,ff2.0、3.6,做成个Demo拿来和大家分享,jsp实现
html5移动端图片上传本地生成缩略图预览,单图上传
Html5上传图片前生成本地预览,可以在本地预览图片,再上传到服务器
上传图片本地预览,能本地看到上传的图片,方便直接的
写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法直接预览,于是采用将图片上传至服务器,传回服务器路径,实现预览。前端采用通过...
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
图片上传,html页面,本地预览,后台前台页面代码都有
实现jsp的本地图片上传及预览,有详细的实现代码。
cupload本地图片上传预览插件
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。 不过群众的智慧是...
上传图片的project 博文链接:https://alisdame.iteye.com/blog/2163940
可以不上传到服务器在客户端预览用户上传的图片。支持所有主流浏览器