图片上传预览兼容ie67 8 9 及 FF

最新推荐文章于 2018-11-15 15:55:52 发布

原创最新推荐文章于 2018-11-15 15:55:52 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

C# asp.net 同时被 2 个专栏收录

113 篇文章

订阅专栏

JavaScript

70 篇文章

订阅专栏

本文介绍了一个实现文件上传后预览功能的代码示例，并针对不同浏览器（如IE、Firefox、Chrome、Opera、Safari）进行了兼容性优化。通过使用JavaScript，实现了在用户选择文件后实时显示文件预览，同时确保了用户体验不受浏览器类型的影响。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <input type="file" name="doc" id="doc" onchange="javascript:setImagePreview();" />
    <p>
        <div id="localImag">
            <img id="preview" width="-1" height="-1" style="display: none" />
        </div>
    </p>
    <script type="text/javascript" language="javascript">
        function setImagePreview() {
            var docObj = document.getElementById("doc");
            var imgObjPreview = document.getElementById("preview");
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
            (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
            (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
            (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            if (Sys.ie) {//Js判断为IE浏览器
                var imgSrc = "";
                if (Sys.ie == '9.0') {//Js判断为IE 9
                    docObj.select();
                    docObj.blur();
                    imgSrc = document.selection.createRange().text;
                    document.selection.empty();
                } else if (Sys.ie == '8.0' || Sys.ie == '7.0' || Sys.ie == '6.0') {//Js判断为IE 8 7 6
                    docObj.select();
                    imgSrc = document.selection.createRange().text;
                    document.selection.empty();
                }
                //IE下，使用滤镜

                var localImagId = document.getElementById("localImag");
                //必须设置初始大小
                localImagId.style.width = "300px";
                localImagId.style.height = "120px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();

            }
            if (Sys.firefox) {//Js判断为火狐(firefox)浏览器
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '120px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            if (Sys.chrome) {//Js判断为谷歌chrome浏览器
                //alert(Sys.chrome);
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '300px';
                imgObjPreview.style.height = '120px';
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            if (Sys.opera) {//Js判断为opera浏览器
                alert( Sys.opera);
            }
            if (Sys.safari) {//Js判断为苹果safari浏览器
                alert( Sys.safari);
            }
            return true;
        }
    </script>
</body>
</html>