之前看到过一个人写的图片上传预览的功能,只不过,别人借助的第三方的js类库去做的图片预览,灰常郁闷,后来打算自已写一个,很纯的js写的,就像处女一样的纯,目前支持ie6,ie7,ie8,firefox的等比缩放的图片预览,chrome浏览器的预览功能尚未实现。可能写得不是很完善,希望大家帮忙改尽。
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片预览</title>
<style type="text/css">
.preview_wrapper
{
width: 300px;
height: 300px;
background-color: #CCC;
display: inline-block;
}
.preview
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); /*ie而设*/
}
#idImg
{
width: 300px;
height: 300px;
}
.helpImg
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); /*ie而设*/
visibility: hidden;
}
</style>
<script language="javascript" type="text/javascript">
/******************************************************************
create Datetime:2010/10/07
version: v1.0
create Author:wulanzhou
main Function:实现图片文件上传的预览与文件类型的判断
appliance range:ie6,ie7,ie8,firefox
bug:无法在chrome浏览器上预览,remote的功能实现出现了一些问题尚未解决
*******************************************************************/
var ImagePreview = {
fileObject: null, //file对象
imgObject: null, //预览img对象
divObject: null, //div对象
helpImgObj: null, //辅助img对象
options: { maxWidth: 300, maxHeight: 300 }, //预览图片允许的大小
browerVesion: navigator.userAgent.toLowerCase(), //浏览器类型
Trim: function (val) {//去空格
return val.replace(/(^/s*)|(/s*$)/g, "");
},
fileformat: function () {//文件上传格式的的判断
if (this.fileObject == null) return false;
if (this.fileObject.value == "") { return false; }
var str = this.fileObject.value;
var Temp = str.lastIndexOf(".");
if (Temp == -1) {
return false;
}
var TempFile = str.substring(Temp + 1, str.length);
if (TempFile != "gif" && TempFile != "jpg" && TempFile != "GIF" && TempFile != "JPG" && TempFile != "bmp" && TempFile != "BMP" && TempFile != "JPEG" && TempFile != "jpeg" && TempFile != "png" && TempFile != "PNG") {
alert("图片文件格式错误,请重新确认!");
return false;
}
},
getObject: function (obj) {
return document.getElementById(obj);
},
Mode: function () {
var nav = this.browerVesion;
if (nav.indexOf("msie 7") != -1 || nav.indexOf("msie 8") != -1)
return "filter";
else if (nav.indexOf("firefox") != -1)
return "domfile";
else if (nav.indexOf("msie 6") != -1)
return "simple";
else
return "remote"; //这种模式的功能预览尚未完成
},
getMode: function () {
switch (this.Mode()) {
case "filter": return this.filterMode();
case "domfile": return this.domfileMode();
case "simple": return this.simpleMode();
case "remote": break;
}
},
filterMode: function () {//ie 7与ie 8的图片预览
this.fileObject.select();
//this.file.select();
try { return document.selection.createRange().text; }
finally { document.selection.empty(); }
},
domfileMode: function () {//firefox图片预览
return this.fileObject.files[0].getAsDataURL();
},
remoteMode: function () {//chrome opera浏览器
},
simpleMode: function () {//ie 6
return this.fileObject.value;
},
previewImg: function () {//预览
var obj = this.getMode();
if (this.browerVesion.indexOf("msie") != -1) {
this.divObject.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj; //針對ie7與ie8而設置的
var helpimg = this.helpImgObj;
helpimg.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = obj;
this.autoSizePreview(this.divObject, 300, 300, helpimg.offsetWidth, helpimg.offsetHeight);
this.imgObject.style.display = "none";
}
else {
var s = this.imgObject;
s.style.display = "block";
s.style.width = "auto";
s.style.height = "auto";
s.src = obj;
}
},
autoSizePreview: function (objPre, maxWidth, maxHeight, width, height) {//预览的图片等比缩放
var param = { width: width, height: height, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = height / rateWidth;
} else {
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
objPre.style.width = param.width + 'px';
objPre.style.height = param.height + 'px';
objPre.style.marginTop = param.top + 'px';
objPre.style.marginLeft = param.left + 'px';
},
// buttonShow: function () {
// if (this.img.width == 0 || this.img.height == 0)
// setTimeout(this.buttonShow(), 1000);
// else
// { }
// },
ImgTransparent: function () {
var nav = this.browerVesion;
if (nav.indexOf("msie 6") != -1 || nav.indexOf("msie 7") != -1) {
return "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage";
}
else
return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
},
loadImg: function (sender) {
ImagePreview.autoSizePreview(sender, 300, 300, sender.offsetWidth, sender.offsetHeight);
}
};
</script>
</head>
<body>
<!-- <form id="form1" enctype="multipart/form-data">-->
<table width="100%" cellpadding="6" cellspacing="1">
<tr>
<td>
<div class="preview_wrapper">
<div class="preview">
<img id="idImg" alt="" onload="ImagePreview.loadImg(this)" />
</div>
</div><br/>
<input type="file" id="idFile" onchange="preview(this)" />
<img class="helpImg" />
</td>
<td>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
document.getElementById("idImg").src = ImagePreview.ImgTransparent(); //為討厭的ie而設的,如果不设定默认会出一个打叉的图片
function preview(obj) {
ImagePreview.fileObject = obj;
var parentObj = obj.parentNode;
var imgObj = parentObj.getElementsByTagName("img")[0];
ImagePreview.helpImgObj = parentObj.getElementsByTagName("img")[1];
ImagePreview.imgObject = imgObj;
ImagePreview.divObject = imgObj.parentNode;
if (ImagePreview.fileformat() == false)return false;
ImagePreview.previewImg();//预览
}
</script>
<!-- </form>-->
</body>
</html>