文章类型: .NET
关键词: 全面,兼容,ie,火狐,Chrome,opera,maxthon3,360浏览器,js,JavaScript,本地图片预览,FileUpload
内容摘要: 主要介绍使用JS解决多种不同浏览器:兼容ie[6-11]、火狐、Chrome、opera、maxthon3、360浏览器进行本地图片预览显示功能

全面兼容ie[6-11]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

2015/7/14 16:45:37    来源:apple    阅读:

示例的html代码如下:

<div id="divPreview">
     <img id="imgHeadPhoto" src="Images/Headphoto/noperson.jpg" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" alt="" />
</div>
<asp:FileUpload ID="fuHeadPhoto" runat="server" onchange="PreviewImage(this,'imgHeadPhoto','divPreview')" size="20" />

将网上的js本地图片预览整合了一下,希望对大家有用,如有其他浏览器不兼容且有解决办法,请给我留言,我将及时更新本文代码。

javascript代码

//js本地图片预览,兼容ie[6-11]、火狐、Chrome17+、Opera11+、Maxthon3、360浏览器
        function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
            var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
            var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
            var browserVersion = window.navigator.userAgent.toUpperCase();
            if (allowExtention.indexOf(extention) > -1) {
                if (fileObj.files) {//兼容chrome、火狐7+、360浏览器5.5+等,应该也兼容ie10,HTML5实现预览
                    if (window.FileReader) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                        }
                        reader.readAsDataURL(fileObj.files[0]);
                    } else if (browserVersion.indexOf("SAFARI") > -1) {
                        alert("不支持Safari浏览器6.0以下版本的图片预览!");
                    }
                } else if (browserVersion.indexOf("MSIE") > -1) {//ie、360低版本预览
                    if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                    } else {//ie[7-9]
                        fileObj.select();
                        if (browserVersion.indexOf("MSIE 9") > -1)
                            fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
                        if (browserVersion.indexOf("MSIE 7") > -1)//browserVersion的值为:MOZILLA/4.0 (COMPATIBLE; MSIE 7.0; WINDOWS NT 6.1; TRIDENT/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
                            fileObj.blur(); //不加上document.selection.createRange().text在ie11会拒绝访问
                        var newPreview = document.getElementById(divPreviewId + "New");
                        if (newPreview == null) {
                            newPreview = document.createElement("div");
                            newPreview.setAttribute("id", divPreviewId + "New");
                            newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
                            newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
                            newPreview.style.border = "solid 1px #d2e2e2";
                        }
                        newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                        var tempDivPreview = document.getElementById(divPreviewId);
                        tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
                        tempDivPreview.style.display = "none";
                    }
                } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
                    var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                    if (firefoxVersion < 7) {//firefox7以下版本
                        document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
                    } else {//firefox7.0+                    
                        document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
                    }
                } else {
                    document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
                }
            } else {
                alert("仅支持" + allowExtention + "为后缀名的文件!");
                fileObj.value = ""; //清空选中文件
                if (browserVersion.indexOf("MSIE") > -1) {
                    fileObj.select();
                    document.selection.clear();
                }
                fileObj.outerHTML = fileObj.outerHTML;
            }
        }
↑ 上一篇文章:在河南,有一种经典 关键词:河南,河南话,经典 发布日期:2015/7/14 16:42:52
↓ 下一篇文章:利用ajax技术实现动态双组合功能 关键词:.net,js,javascript,ajax,XMLH.. 发布日期:2015/7/14 17:11:02
相关文章:
适用于各种主流浏览器的JS弹出一个相对位置的浮动层 关键词:javascript,JS,浮动层,div,各种浏览器,弹出,一个,相对位置,css,层,绝对位.. 发布日期:2015-07-20 17:37
从外部的js文件中获取ASPX页面的控件ClientID 关键词:外部,js,文件,获取,ASPX,页面,控件,ClientID,C#,.NET,javascript 发布日期:2015-07-29 14:10
C# 弹出消息框后跳转另一页面 关键词:C#,弹出,消息框,跳转,另一页面,Response,Write,js,javascript,C.. 发布日期:2015-07-29 14:42
相关目录:.NETJAVAHTML软件开发
我要评论
正在加载评论信息......