chrome以及ie 图片预览

最新推荐文章于 2021-07-07 17:31:55 发布

老何_低调

最新推荐文章于 2021-07-07 17:31:55 发布

阅读量423

点赞数

本文链接：https://blog.csdn.net/heqinghua217/article/details/53302540

版权

找了好多中方法，始终在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代码如下：

无需引入任何外部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=="; 
         } 
     }	
}
}