图片本地预览（兼容各种浏览器）

最新推荐文章于 2020-11-24 14:45:43 发布

yanxudong001

最新推荐文章于 2020-11-24 14:45:43 发布

阅读量797

点赞数

分类专栏： j2ee 文章标签： js 浏览器 ie9 chrome 火狐

j2ee 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div id="divPreview">
<img width="200px" height="200px" id="imgHeadPhoto" src="" alt="" />
</div>
<input type="file" οnchange="PreviewImage(this,'imgHeadPhoto','divPreview')" size="20"/>

<script type="text/javascript">
//js本地图片预览，兼容IE[6-10]、火狐、Chrome17+、Opera11+、Maxthon3、safari6.0
function PreviewImage(fileObj,imgPreviewId,divPreviewId){
var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名
var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();
var browserVersion= window.navigator.userAgent.toUpperCase();
if(allowExtention.indexOf(extention)>-1){
if(fileObj.files){//HTML5 filereader实现预览，兼容safari6.0以上（包括chrome33、360 6.3.1、opera20等），兼容火狐23以上；
if(window.FileReader){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
}else if(browserVersion.indexOf("SAFARI")>-1){
document.getElementById(imgPreviewId).setAttribute("alt","image preview don't support Safari kernel below 6.0 version!");
}
}else if (browserVersion.indexOf("MSIE")>-1){//兼容IE浏览器
if(browserVersion.indexOf("MSIE 6")>-1){//IE6,直接添加文件路径
document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
}else{//IE[7-10]，使用滤镜实现
fileObj.select();
fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview =document.getElementById(divPreviewId+"New");
if(newPreview==null){
newPreview =document.createElement("div");
newPreview.setAttribute("id",divPreviewId+"New");
newPreview.style.width = document.getElementById(imgPreviewId).width+"px";
newPreview.style.height = document.getElementById(imgPreviewId).height+"px";
newPreview.style.border="solid 1px #d2e2e2";
}
newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview=document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);
tempDivPreview.style.display="none";
}
}else if(browserVersion.indexOf("FIREFOX")>-1){//FireFox
var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if(firefoxVersion<7){//FireFox7以下版本
document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
}else{//FireFox7.0+
document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
}
}else{//其他未知浏览器
document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
}
}else{
alert("only support the files end with"+allowExtention+"!");
fileObj.value="";//清空选中文件
if(browserVersion.indexOf("MSIE")>-1){
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML=fileObj.outerHTML;
}
}
</script>
</body>
</html>

yanxudong001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片本地预览（兼容各种浏览器）

//js本地图片预览，兼容IE[6-10]、火狐、Chrome17+、Opera11+、Maxthon3、safari6.0function PreviewImage(fileObj,imgPreviewId,divPreviewId){ var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名 var extention=
复制链接

扫一扫