【分享】javascript本地预览浏览的图片，兼容ie6、ie7、ie8、火狐11、Chrome17.0.963.83浏览器的图片预览

Question

大家一起测试下，看看其他浏览器是否兼容，如果有兼容其他浏览器的代码，发不出来，我整合一下，搞一个兼容性比较好的本地图片预览的功能，相信很多人都会用到吧，大家一起努力。下面代码有的地方需要自己修改，不要全部赋值黏贴。//用来预览浏览的图片，兼容ie6、ie7、ie8、火狐11、Chrome17.0.963.83浏览器的图片预览
        function ShowImage(obj) 
        { 
            var allowSuffix="<%=GetAllowPicSuffix() %>";//.jpg,.bmp,.gif,.png
            var suffix=obj.value.substring(obj.value.lastIndexOf(".")+1).toLowerCase();
            //获取浏览器版本信息
            var browserVersion= window.navigator.userAgent.toUpperCase();
            //判断是否是允许的文件
            if(allowSuffix.indexOf(suffix)>-1){
                //兼容ie和火狐
                if (browserVersion.indexOf("MSIE 6.0")>-1){//ie6
                    obj.select()
                    $("#imgHeadPhoto").attr("src",document.selection.createRange().text);
                }else if(browserVersion.indexOf("MSIE 7.0")>-1 || browserVersion.indexOf("MSIE 8.0")>-1){//ie7、ie8
                    //滤镜实现
                    obj.select();
                    var newPreview = document.getElementById("divNewPreview");
                    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; 
                    newPreview.style.width = 160; 
                    newPreview.style.height = 170; 
                    newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = 'scale';
                    $("#divPreview").attr("style","display:none");
                    $("#divNewPreview").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:160px;height:170px;border:solid 1px #d2e2e2;");            
                }
                else if(browserVersion.indexOf("Firefox")>-1){ //火狐
                    var objectURL = window.URL.createObjectURL(obj.files[0]);
                    $("#imgHeadPhoto").attr("src", window.URL.createObjectURL(obj.files[0]));
                }  
                else if(obj.files){ 
                    //兼容chrome，也可以兼容火狐，Chrome、Firefox上通过HTML5来实现
                    var reader = new FileReader();  
                    reader.onload = function(evt){$("#imgHeadPhoto").attr("src",evt.target.result);}  
                    reader.readAsDataURL(obj.files[0]);  
                }         
            }else{
                alert("仅支持"+allowSuffix+"文件类型");
                //清空选中文件            
                obj.value="";
                if(browserVersion.indexOf("MSIE")>-1){
                    obj.createTextRange().execCommand("delete");
                    //obj.select();
                    //document.selection.clear();
                }                
                obj.outerHTML=obj.outerHTML;
            }
        }
//html代码<td colspan="3" valign="bottom">
                    <div id="divPreview">
                        <img id="imgHeadPhoto" src="~/Images/Headphoto/noperson.jpg" style="width: 160px;
                            height: 170px; border: solid 1px #d2e2e2;" runat="server" alt="" />
                        <asp:TextBox ID="txtHeadPhoto" runat="server" Style="display: none" ReadOnly="true"></asp:TextBox>
                    </div>
                    <div id="divNewPreview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
                        width: 160px; height: 170px; border: solid 1px #d2e2e2; display: none;">
                    </div>
                    <asp:FileUpload ID="fuHeadPhoto" runat="server" onchange="ShowImage(this)" size="20" />
                    <font color="red">
                        <asp:Literal ID="ltPic" runat="server"></asp:Literal></font>
                </td>

Answer 1

js实现的不能兼容所有浏览器的。使用Flash兼容的浏览器更多些

Answer 2

我靠 这个必须顶！省的我天天喊flash!

Answer 3

谁还有好的解决方案，不要上传到服务器的，一起来讨论讨论。flash的究竟要如何做，要不要上传到服务器呢？

Answer 4

flash也可以实现真正的预览啊 先加载到内存再实现预览的。
留邮箱或Q给你个组件例子就知道了 

Answer 5

[email protected]
谢谢大哥啊。

Answer 6

可以兼容ie6、ie7、ie8、火狐11、Chrome17.0.963.83、Opera最新、傲游浏览器 3最新
但是不兼容Safari