// 是否为图片格式
var isImage = /\.jpg|\.jpeg|\.gif|\.png|\.bmp$/i;
// 图片唯一数
var uniqueNum = 0;
/**
* 图片预览,为file控件添加预览功能
* @param divObj :指定预览层,如果此层未设置宽高,默认均为100;
* @param fileObj:绑定的上传控件,改动控件时预览图片;
*/
function preView(evt, divID, fileObj) {
// 默认宽高
var maxWidth = 100;
var maxHeight = 100;
// 默认或无预览或错误时显示图片
var noviewImage = "/images/noviewsmall.jpg";
var imageView;
var divObj = $('#' + divID);
// 初始图片路径
initialSrc = $('#' + fileObj);
// 如果div有自定义宽高,更改默认宽高。
if (divObj.width()) {
maxWidth = divObj.width();
} else {
divObj.css({ width: maxWidth });
}
if (divObj.height()) {
maxHeight = divObj.height();
} else {
divObj.css({ height: maxHeight });
}
// 不同的浏览器,调用不同的预览实现方式
var newOnchange = null;
with ({ uniqueNum: uniqueNum }) {
if ($.browser.mozilla) {
var files = evt.target.files;
if (uniqueNum < 1) {
// 火狐firefox浏览器预览方式
divObj.append("<img id='image_view_" + uniqueNum + "' src='" + noviewImage + "' style='max-width:" + maxWidth + "px;max-height:" + maxHeight + "px;' />");
}
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
if (isImage.test(initialSrc.attr('value'))) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function () {
return function (e) {
// Render thumbnail.
imageView = $("#image_view_0");
imageView.attr({ src: e.target.result });
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
} else {
if ($.browser.msie) {
if (uniqueNum < 1) {
// 创建一个参照图片,获取实际大小,但页面中不会对其显示
divObj.append("<img id='preview_size_fake_" + uniqueNum + "' src='" + initialSrc.attr('value') + "' style='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);visibility:hidden;position: absolute;'/>");
}
// 获取这个参照对象
var previewSizeFakeImage = $("#preview_size_fake_0");
// IE7/IE8 滤镜的预览方式
divObj.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);" });
divObj[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = initialSrc.attr('value');
// 计算等比宽高
var zoomParamLoad = clacImgZoomParam(parseInt(maxWidth), parseInt(maxHeight), previewSizeFakeImage.width(), previewSizeFakeImage.height());
divObj.css({ width: zoomParamLoad.width });
divObj.css({ height: zoomParamLoad.height });
// 参考图片取消占位
previewSizeFakeImage.css({ display: "none" });
try {
var path;
if (isImage.test(initialSrc.attr('value'))) {
// IE8取实际路径
initialSrc[0].select();
path = document.selection.createRange().text;
} else {
path = initialSrc.attr('value');
}
previewSizeFakeImage[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
// 参考图片暂时占位
previewSizeFakeImage.css({ display: "" });
// 计算等比宽高
var zoomParam = clacImgZoomParam(parseInt(maxWidth), parseInt(maxHeight), previewSizeFakeImage.width(), previewSizeFakeImage.height());
divObj.css({ width: zoomParam.width });
divObj.css({ height: zoomParam.height });
// 参考图片取消占位
previewSizeFakeImage.css({ display: "none" });
// 设置预览图片
divObj[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
} catch (e) {
divObj[0].filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = initialSrc.attr('value');
}
} else {
if (uniqueNum < 1) {
// IE6预览方式
divObj.innerHTML = "<img id='image_view_" + uniqueNum + "' src='" + initialSrc + "' style='_width:" + maxWidth + "px;_height:" + maxHeight + "px;' />";
}
imageView = $("#image_view_0");
var imageTempLoad = new Image();
imageTempLoad.src = initialSrc.attr('value');
imageTempLoad.onload = function () {
// 计算等比宽高
var zoomParam = clacImgZoomParam(parseInt(maxWidth), parseInt(maxHeight), imageTempLoad.width, imageTempLoad.height);
imageView.css({ width: zoomParam.width });
imageView.css({ height: zoomParam.height });
};
var imageTemp = new Image();
if (isImage.test(initialSrc.attr('value'))) {
imageTemp.src = initialSrc.attr('value');
imageTemp.onerror = function () {
imageView.onnerror = "";
imageView.src = initialSrc.attr('value');
};
} else {
imageTemp.src = initialSrc.attr('value');
}
imageTemp.onload = function () {
// 计算等比宽高
var zoomParam = clacImgZoomParam(parseInt(maxWidth), parseInt(maxHeight), imageTemp.width, imageTemp.height);
imageView.css({ width: zoomParam.width });
imageView.css({ height: zoomParam.height });
};
imageView.attr({ src: imageTemp.src });
}
}
}
if (uniqueNum == 0) {
uniqueNum++;
}
}
// 获取等比宽高-参数:最大宽高、实际宽高
function clacImgZoomParam(maxWidth, maxHeight, width, height) {
var param = { width: width, height: height };
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;
}
}
return param;
}
asp.net 上传图片时,预览本地图片,支持IE6、IE8、火狐
最新推荐文章于 2025-07-13 13:16:29 发布