asp.net 上传图片时,预览本地图片,支持IE6、IE8、火狐

该博客介绍了一种跨浏览器的图片上传预览功能的实现方法,主要针对IE6、IE8和火狐浏览器。通过JavaScript和jQuery,利用FileReader API、滤镜效果以及图片等比例缩放技术,实现不同浏览器环境下图片的实时预览。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 是否为图片格式
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;
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值