本上传功能的实现采用iframe,这里主要写的是实现图片未上传时的实时预览功能,即在未上传图片前可看到该选择图片。兼容IE6\7\8\9、chrome、opera、firefox,不兼容safari,IE9以上版本未测试。
代码片段一:
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;
}
}
代码片段二(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;];}
代码片段三:
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;
}
}
td{font-size:12px;}
代码片段四:
更多信息请查看IT技术专栏