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

该博客介绍了一种跨浏览器的图片上传预览功能的实现方法,主要针对IE6、IE8和火狐浏览器。通过JavaScript和jQuery,利用FileReader API、滤镜效果以及图片等比例缩放技术,实现不同浏览器环境下图片的实时预览。
摘要由CSDN通过智能技术生成
// 是否为图片格式
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.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值