如何在各种浏览器上传之前预览图像

Question

我想在上传之前显示图像的预览.我找到了一个适用于ie6和firefox的部分解决方案,还没有在ie7或ie8中测试过它.但我想要一个适用于safari,ie7和ie8的解决方案.这是通过组合ie6和firefox解决方案获得的解决方案:

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");
}
}
}

getAsDataURL()部分在firefox中工作,而"src = what.value"部分在ie6中工作,但是在safari中可以使用什么,并且"src = what.value"在ie7和ie8中工作了吗？如果没有,是否有一些解决方案也适用于那里？如果我可以在5或6个浏览器中使图像预览工作,我将很高兴.如果没有那么是唯一的选择,有两个表单与图像上传部分另一种形式？

Answer 1

你可以使用吹气功能.在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{  
  incorrect file type  
 }   
}  

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

Answer 2

如果这样做，这将是一个严重的安全问题。您无法预览用户计算机中的文件。您必须将文件上传到服务器，上传成功后可以显示文件的预览。