javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > JavaScript >

JavsScrpt实现上传图片预览功能,兼容各大浏览器

来源:IT技术网编辑:一页书发布于:2013-07-16人围观浏览器兼容功能预览上传图片JavsScrpt

本上传功能的实现采用iframe,这里主要写的是实现图片未上传时的实时预览功能,即在未上传图片前可看到该选择图片。兼容IE6\7\8\9、chrome、opera、firefox,不兼容safari,IE9以上版本未测试。
代码片段一:

 

<script language="javascript">
function InitImageObj(fileObj, p_doma, p_domg, p_domd){
var allowExtention = ".jpg,.jpeg,.bmp,.gif,.png";
var doma = parent.document.getElementById(p_doma);
var domg = parent.document.getElementById(p_domg);
var domd = parent.document.getElementById(p_domd);
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
var browserVersion = window.navigator.userAgent.toUpperCase();
if(allowExtention.indexOf(extention)>-1){
if (browserVersion.indexOf("MSIE")>-1){
domd.innerHTML = "";
fileObj.select();
domd.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
domd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileObj.value;
doma.href = fileObj.value;
        }else if(browserVersion.indexOf("FIREFOX")>-1){
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if(firefoxVersion<7){
doma.href = fileObj.files[0].getAsDataURL();
                domg.src = fileObj.files[0].getAsDataURL();
            }else{
doma.href = window.URL.createObjectURL(fileObj.files[0]);
domg.src = window.URL.createObjectURL(fileObj.files[0]);
            }
        }else if(fileObj.files){                 
            if(typeof FileReader !== "undefined"){
var reader = new FileReader(); 
reader.onload = function(e){
doma.href = e.target.result;
domg.src = e.target.result;
}
reader.readAsDataURL(fileObj.files[0]);
            }else if(browserVersion.indexOf("SAFARI")>-1){
alert("图片预览暂时不支持safari浏览器!");
return;
            }
        }else{
alert("你的浏览器不支持图片预览!");
return;
        }      
    }else{
fileObj.value="";
if(browserVersion.indexOf("MSIE")>-1){                        
fileObj.select();
document.selection.clear();
        }             
fileObj.outerHTML=fileObj.outerHTML;
alert("仅支持"+allowExtention+"为后缀名的文件!");
return;
    }
}
</script>
代码片段二(CSS):

 

.imgfix{padding-left:0; [;padding-left:2px;]; _padding-left:0;}
.iframefix{_padding-left:0px;}
.fontfix{font-weight: normal !important;}
.ie6fix{display:inline-block; _zoom:1; _display:inline;}
.imgdiv{display:inline-block; [;padding-left:2px;];}
代码片段三:

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<script language="javascript">
function InitImageObj(fileObj, p_doma, p_domg, p_domd){
var allowExtention = ".jpg,.jpeg,.bmp,.gif,.png";
var doma = parent.document.getElementById(p_doma);
var domg = parent.document.getElementById(p_domg);
var domd = parent.document.getElementById(p_domd);
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
var browserVersion = window.navigator.userAgent.toUpperCase();
if(allowExtention.indexOf(extention)>-1){
if (browserVersion.indexOf("MSIE")>-1){
domd.innerHTML = "";
fileObj.select();
domd.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
domd.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileObj.value;
doma.href = fileObj.value;
        }else if(browserVersion.indexOf("FIREFOX")>-1){
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if(firefoxVersion<7){
doma.href = fileObj.files[0].getAsDataURL();
                domg.src = fileObj.files[0].getAsDataURL();
            }else{
doma.href = window.URL.createObjectURL(fileObj.files[0]);
domg.src = window.URL.createObjectURL(fileObj.files[0]);
            }
        }else if(fileObj.files){                 
            if(typeof FileReader !== "undefined"){
var reader = new FileReader(); 
reader.onload = function(e){
doma.href = e.target.result;
domg.src = e.target.result;
}
reader.readAsDataURL(fileObj.files[0]);
            }else if(browserVersion.indexOf("SAFARI")>-1){
alert("图片预览暂时不支持safari浏览器!");
return;
            }
        }else{
alert("你的浏览器不支持图片预览!");
return;
        }      
    }else{
fileObj.value="";
if(browserVersion.indexOf("MSIE")>-1){                        
fileObj.select();
document.selection.clear();
        }             
fileObj.outerHTML=fileObj.outerHTML;
alert("仅支持"+allowExtention+"为后缀名的文件!");
return;
    }
}
</script>
</head>
<style>
td{font-size:12px;}
</style>
<body bgcolor="#EFF3FF" leftmargin="0" topmargin="0">
<table cellpadding="0" cellspacing="0" border="0" width="480px" height="25px">
  <form name="form1" enctype="multipart/form-data" method="post" action="upPicPost.php" onsubmit="if (document.all('fileimage').value==''){alert('请选择图片');return false;}else{this.submitUpload.disabled=true;return true;}">
    <tr> 
      <td>
        <input type="file" name="fileimage" onchange="InitImageObj(this,'uploadpic_a','uploadpic_g', 'uploadpic_d');">
        <input class="button1" type="submit" name="submitUpload" value="上传">
      </td>
    </tr>
  </form>
</table>
</html>
代码片段四:

 

<td>
<input type="text" name="imgs" id="uploadpic_i" size="50" value="" />
<br />
<a id="uploadpic_a" href="/def.jpg" target="_blank">
<div id="uploadpic_d" class="imgdiv" style="width:110px; height:80px;">
<img id="uploadpic_g" src="/def.jpg" border="0" target="blank" width="110px" height="80px" />
</div>
</a>
<iframe id="UploadFiles" src="/UpPic.php" frameborder="0" scrolling="no" width="600px" height="25px"></iframe>
</td>

浏览器,兼容,功能,相关的文章
有时间的话来看看IT界的突发事件