input类型为file时，博客园，chrome，FF和IE8的fakepath问题处理方法

阅读更多

在处理表单的时候，如果input类型为file时，FF，chrome，IE8获取文件时获取到一个fakepath，而不是真正的文件地址；不过ie6，ie7却可以获取，在IE8之后，安全级别提高了。但是，当出现一个客户端图片预览这样的需求的时候，对于不同浏览器就要采用不用的策略了；IE可以使用滤镜，chrome等可以使用HTML5的方式，ie8 input，具体如下：


这样，通过滤镜的方式获得path，fakepath，不过，使用滤镜时，图片的左上角会出现一个小图标，这时，我们可以绕弯的用一个透明图片作为file_img的src，占用这个src，ie8 input，使得小图片被显示为透明;
对于FF，网上有一种流传很久的使用getAsDataURL方法来获取的方法，fakepath，比如：
function getFullPath(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;
    }
}
不过，我们可以使用html5的方法来兼容FF，HTML5 File API中定义了一个BlobReader，通过它可以使用各种不同的方式读入文件并且可以监听和处理读取文件过程中的各个状态。不过在Firefox与Chrome的实现中，并没有这样一个BlobReader，取而代之的是FileReader，拥有与BlobReader相同的方法和事件。
比如：
function getPath(obj,fileQuery){
var file =fileQuery.files[0]; 
var reader = new FileReader(); 
reader.onload = function(e){
obj.setAttribute("src",e.target.result)
}
reader.readAsDataURL(file); 
}
chrome的解决办法也和FF的一样，使用FileReader对象来实现，fakepath，接下来，我们需要一个完全兼容的版本；
/*fileQuery是指input type为file的对象，在事件中使用this来替代，fakepath，
比如:obj.onChange=function(){
var file_img=document.getElementById("img");
getPath(file_img,this,transImg);
}
transImg是解决IE左上角图标的那张透明图片的路径;*/
var getPath=function(obj,fileQuery,transImg){
if(window.navigator.userAgent.indexOf("MSIE")>=1){
obj.select();
var path=document.selection.createRange().text;
obj.removeAttribute("src");
obj.setAttribute("src",transImg);
obj.style.filter=  
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; 
}
else{
var file =fileQuery.files[0]; 
var reader = new FileReader(); 
reader.onload = function(e){
obj.setAttribute("src",e.target.result)
}
reader.readAsDataURL(file); 
}
}
当然，也许我们始终觉得用JS的方法会很烦躁，fakepath，那么可以使用以下2种作为替代方案 1,falsh方法，采用falsh方法也比较妥当，ie8 input，没有兼容的纷扰；2，先进服务器，然后再从服务器读取出来；

转载，原文地址：http://www.09687.com/news/iuuq%25%2F%2Fbsdijwf_docmpht_dpn%2Fb%2F3271969%2F.html