如何在各种浏览器中上传之前预览图像 [英] how to preview an image before upload in various browsers

问题描述

我想在上传图片之前显示图片预览。我发现了一个适用于ie6和firefox的部分解决方案，并且尚未在ie7或ie8中对其进行测试。但我想要一个在safari中工作的解决方案，即ie7和ie8。这是通过结合ie6和firefox解决方案获得的解决方案：

 函数预览（什么）{
 if（jQuery .browser.msie）{
 document.getElementById（preview-photo）。src = what.value; 
 return; 
} 
 else if（jQuery.browser.safari）{
 document.getElementById（preview-photo）。src = what.value; 
 return; 
} 
 document.getElementById（preview-photo）。src = what.files [0] .getAsDataURL（）; 
 // alert（jQuery（＃preview-photo）。height（））; 
 // alert（jQuery（＃preview-photo）。width（））; 
 var h = jQuery（＃preview-photo）。height（）; （（h> 68）||（w> j）（&＃160;＃预览宽度是68，高度浮动
） 68））{
 if（h> w）{
 jQuery（＃preview-photo）。css（height，68px）; 
 jQuery（＃preview-photo）。css（width，auto）; 
} else {
 jQuery（＃preview-photo）。css（width，68px）; 
 jQuery（＃preview-photo）。css（height，auto）; 
 
 
 $ b $ / code $ / pre 
 $ b $ p getAsDataURL（）在firefox中，src = what.value部分在ie6中工作，但是Safari中会起作用，并且src = what.value在ie7和ie8中也起作用了吗？如果没有，是否有一些解决方案也可以在那里工作？如果我可以在5个或6个浏览器中进行图像预览，我会很高兴。如果它不是，那么是唯一的选择，有两种形式与另一种形式的图像上传的一部分？
解决方案
您可以使用打击功能。在IE7 +和Firefox上进行测试并且chrome 
  function loadname（img，previewName）{
 
 var isIE = （navigator.appName ==Microsoft Internet Explorer）; 
 var path = img.value; 
 var ext = path.substring（path.lastIndexOf（'。'）+ 1）.toLowerCase（）; 
 
 if（ext ==gif|| ext ==jpeg|| ext ==jpg|| ext ==png）
 {
 if（isIE）{
 $（'＃'+ previewName）.attr（'src'，path）; 
} else {
 if（img.files [0]）
 {
 var reader = new FileReader（）; 
 reader.onload = function（e）{
 $（'＃'+ previewName）.attr（'src'，e.target.result）; 
} 
 reader.readAsDataURL（img.files [0]）; 
} 
} 
 
} else {
不正确的文件类型
} 
} 
 
<输入类型=filename =imageonchange（loadname（this，'previewimg'））> 
< img src =about：blankname =previewimgid =previewimgalt => 
  
 
I want to show preview of an image before it is uploaded. I have found a partial solution that works for ie6 and firefox, and havent yet tested it in ie7 or ie8. But i want a solution that works in safari, ie7 and ie8 as well. Here is the solution obtained by combining the ie6 and firefox solution:
function preview(what) {
if(jQuery.browser.msie) {
document.getElementById("preview-photo").src=what.value;
return;
}
else if(jQuery.browser.safari) {
document.getElementById("preview-photo").src=what.value;
return;
}
document.getElementById("preview-photo").src=what.files[0].getAsDataURL();
//  alert(jQuery("#preview-photo").height());
//  alert(jQuery("#preview-photo").width());
var h = jQuery("#preview-photo").height();  
var w = jQuery("#preview-photo").width();//assuming width is 68, and height is floating
if ((h > 68) || (w > 68)){
if (h > w){
jQuery("#preview-photo").css("height", "68px");
jQuery("#preview-photo").css("width", "auto");
}else {
jQuery("#preview-photo").css("width", "68px");
jQuery("#preview-photo").css("height", "auto");
}
}
}
The getAsDataURL() part works in firefox, and the "src=what.value" part works in ie6, but what would work in safari, and does "src=what.value" work in ie7 and ie8 as well? If not, is there some solution that also works there? I will be happy if i can make the image preview work in 5 or 6 browsers. If it doesn't then is the only option to have two forms with image upload part of another form?
解决方案
you can use blow function. tested on IE7+ and Firefox and chrome  
function loadname(img, previewName){  

var isIE = (navigator.appName=="Microsoft Internet Explorer");  
var path = img.value;  
var ext = path.substring(path.lastIndexOf('.') + 1).toLowerCase();  

 if(ext == "gif" || ext == "jpeg" || ext == "jpg" ||  ext == "png" )  
 {       
    if(isIE) {  
       $('#'+ previewName).attr('src', path);  
    }else{  
       if (img.files[0]) 
        {  
            var reader = new FileReader();  
            reader.onload = function (e) {  
                $('#'+ previewName).attr('src', e.target.result);  
            }
            reader.readAsDataURL(img.files[0]);  
        }  
    }  

 }else{  
  incorrect file type  
 }   
}  

<input type="file" name="image" onchange("loadname(this,'previewimg')") >
<img src="about:blank" name="previewimg" id="previewimg" alt="">


                        
这篇关于如何在各种浏览器中上传之前预览图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！