即刻显示图片，兼容ie,firefox

最新推荐文章于 2022-11-08 16:59:47 发布

weixin_30823833

最新推荐文章于 2022-11-08 16:59:47 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qingmaple/p/4118943.html

本文介绍了一种使用JavaScript实现的文件上传时的图片预览功能。该方法兼容多种浏览器，包括IE，并提供了两种不同的预览方式：对于支持FileReader API的浏览器直接使用该API进行预览，而对于不支持的浏览器（如IE）则通过ActiveX对象实现预览效果。

********

//file控件，file控件id，img控件id
    function preImg(imgFile,sourceId, targetId) {        
        var filepath=$("#"+sourceId).val();
        var reg = /.+(.JPEG|.jpeg|.JPG|.jpg|.GIF|.gif|.BMP|.bmp|.PNG|.png)$/g;
        if(!reg.test(filepath)){
            alert("图片格式不正确");
            $("#preview").hide();
            return;
        }
       if(typeof FileReader=='undefined'){  //针对ie
            /* alert('你的浏览器不支持filereader'); */
　　　　　　$("#preview2").show();
            var imgDiv=document.getElementById(targetId);
            imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";  
            imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src =getPath(imgFile);
            //alert(getPath(imgFile));//绝对地址
        }else{
            /* alert('支持filereader'); */   //针对ie以外的其他浏览器

　　　　　　$("#preview").show();

            var reader = new FileReader();
            reader.onload = function(e) {
                var img = document.getElementById(targetId);
                img.style.display="block";
                img.src = this.result;
            }
            reader.readAsDataURL(document.getElementById(sourceId).files[0]);
        }
    }
    
    function getPath(obj) {   
        if(obj){      
            if (window.navigator.userAgent.indexOf("MSIE")>=1){         
                obj.select();        
                return document.selection.createRange().text;      
            }     
            else if(window.navigator.userAgent.indexOf("Firefox")>=1){       
                if(obj.files){         
                 return obj.files.item(0).getAsDataURL();         
             }       
                return obj.value;       
            }     
            return obj.value;     
        } 
    }

jsp页面

<fieldset>
                            <legend>上传学生照片</legend>
                            <input type="file" class="input_text" name="upload1" id="upload1"
                                style="width: 60%" onchange="preImg(this,this.id,'imgPre')"/>
                        </fieldset>

显示照片

<div id="preview">
                                        <img width="115px" height="130px" id="imgPre"/>
                                    </div>
                                    <div id="preview2" style="width:115px;height:130px;">  //针对ie,如果用了image控件，会有一个小图标，视觉不好，所以如果是ie，隐藏preview，显示preview2
                                    </div>