本上传功能的实现采用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技术专栏
公众号
事业单位
当前位置：
公考类
招聘类
各类考试
