jsp 选择图片后马上显示

最新推荐文章于 2025-06-05 13:17:29 发布

guoxiaohuivip

最新推荐文章于 2025-06-05 13:17:29 发布

阅读量2k

点赞数

分类专栏： html 文章标签：图片 jsp

html 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个用于处理文件上传的功能，特别关注于图片格式验证及不同浏览器环境下的预览实现。该方法支持PNG、JPEG和JPG格式，并针对IE6及更高版本的IE浏览器提供了兼容解决方案。

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

function checkFile(file) {
    var pic = document.getElementById("reverseImg");
    var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();
    // gif在IE浏览器暂时无法显示
    if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {
        layer.alert("图片的格式必须为png或者jpg或者jpeg格式！",{icon: 0});
        return;
    }
    var isIE = navigator.userAgent.match(/MSIE/) != null,
            isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;

    if (isIE) {
        file.select();
        var reallocalpath = document.selection.createRange().text;

        // IE6浏览器设置img的src为本地路径可以直接显示图片
        if (isIE6) {
            pic.src = reallocalpath;
        } else {
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
            pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
            // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
            pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
        }
    } else {
        html5Reader(file);
    }
}

function html5Reader(file) {
    var file = file.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var pic = document.getElementById("positiveImg");
        pic.src = this.result;
    }
}