最近项目中用到的图片上传前预览功能，兼容IE6-9，FF
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "120px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
源码
http://www.cnblogs.com/load/archive/2012/03/06/2381657.html[color=red][/color]
分享到：
相关推荐
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
上传图片的project 博文链接：https://alisdame.iteye.com/blog/2163940
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型...
js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9
在上传图片时，经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
图片上传，html页面，本地预览，后台前台页面代码都有
插件描述：js上传图片本地预览。 参考实例：http://www.jq22.com/jquery-info6180
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
cupload本地图片上传预览插件
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览，效果类似如下： 选择图片前的页面： 选择图片之后的预览效果： 下面直接上代码（只是最简单的实现代码，css...
此压缩包中完全能实现的功能是在extjs中让本地照片预览，并且将地址传递给java后台，将图片文件以blob的形式存储到oracle数据库，并且可以默认将数据库中的数据第一次加载在预览框里（也就是从数据库中读出blob数据...
图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来实现图片上传预览功能，下面来看一个例子。 原理: 分为两步：当上传图片的input被触发...
js+asp.net 多图片上传+预览
此压缩包中完全能实现的功能是在extjs中让本地照片预览，并且将地址传递给java后台，将图片文件以blob的形式存储到oracle数据库，并且可以默认将数据库中的数据第一次加载在预览框里（也就是从数据库中读出blob数据...
layui的cropper裁剪插件，图片采集，用于在线裁剪图片生成,无须上传在线预览裁剪图片。
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
javascript 上传并预览图片（兼容IE，6,7,8,9+,谷歌,火狐,Safari）移动端也可以。