首页 > 代码库 > 即刻显示图片,兼容ie,firefox
即刻显示图片,兼容ie,firefox
********
//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 =http://www.mamicode.com/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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。