chrome以及ie 图片预览

找了好多中方法,始终在qtweb浏览器中显示不了,主要是浏览器为了安全,所有上传的路径只显示文件名,中间的部分会变成facepath, 这时候需要一个办法做转换:


js代码如下:


function previewImage(file){

if (file.files && file.files[0])

 {

var img = document.getElementById('img1');

var reader = new FileReader();

reader.onload = function(evt){

img.src= evt.target.result

}

reader.readAsDataURL(file.files[0]);

 }

}



html代码如下:

<input type="file" id="fileid" οnchange="previewImage(this);" /> 

<img id="img1" src="" />


无需引入任何外部js,直接可以用。

本文借鉴自: http://blog.csdn.net/nhconch/article/details/7295456




ie:

 
function previewImage(file){
var ua = navigator.userAgent.toLowerCase();
var isChrome = ua.match(rome\/([\d.]+)/);
if(isChrome){
if (file.files && file.files[0])
 {
var img = document.getElementById('fileimg');
var reader = new FileReader();
reader.onload = function(evt){
img.src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
 }
} else {
var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); 
var img = document.getElementById('fileimg'); 
     // gif在IE浏览器暂时无法显示 
     if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ 
         alert("图片的格式必须为png或者jpg或者jpeg格式!");  
         return; 
     } 
     var isIE = navigator.userAgent.match(/MSIE/) != null, 
         isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null; 
  
     if(isIE) { 
        file.select(); 
        var reallocalpath = document.selection.createRange().text; 
  
        // IE6浏览器设置img的src为本地路径可以直接显示图片 
         if (isIE6) { 
        	 img.src = reallocalpath; 
         }else { 
            // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片,但是可以通过滤镜来实现 
             img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")"; 
             // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片 


       img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="; 
         } 
     }	
}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值