本上傳功能的實現(xiàn)采用iframe，這里主要寫的是實現(xiàn)圖片未上傳時的實時預(yù)覽功能，即在未上傳圖片前可看到該選擇圖片。兼容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("圖片預(yù)覽暫時不支持safari瀏覽器!");
return;
}
}else{
alert("你的瀏覽器不支持圖片預(yù)覽!");
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("圖片預(yù)覽暫時不支持safari瀏覽器!");
return;
}
}else{
alert("你的瀏覽器不支持圖片預(yù)覽!");
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" 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 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">
<img id="uploadpic_g" src="/def.jpg" target="blank" width="110px" height="80px" />
</div>
</a>
<iframe id="UploadFiles" src="/UpPic.php" frameborder="0" scrolling="no" width="600px" height="25px"></iframe>
</td>