码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-11-24 16:57:31      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   ar   color   os   sp   for   on   

********

//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>

 

 

*******

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

标签:style   blog   io   ar   color   os   sp   for   on   

原文地址:http://www.cnblogs.com/qingmaple/p/4118943.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!