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

最新推荐文章于 2015-12-18 15:33:36 发布

dgh_85

最新推荐文章于 2015-12-18 15:33:36 发布

阅读量1.3k

点赞数

分类专栏：预览本地图片 asp.net 上传图片时 asp.net 支持IE6、IE8、火狐文章标签： ie asp.net image function path filter

本文链接：https://blog.csdn.net/dgh_85/article/details/7293483

版权

该博客介绍了一种跨浏览器的图片上传预览功能的实现方法，主要针对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.