首页 > 建站教程 > JS、jQ、TS >  js获取获取type=＂file＂的文件路径中的文件名正文

js获取获取type=＂file＂的文件路径中的文件名

分为两部分，自己去判断浏览器的类型，然后调用不同函数。在IE低版本中可以直接获得文件路径，不过在高版本和firefox和chrome中是不允许的。这样就能实现不用上传就可以实现图片的实时预览了。

1.IE内核的部分，IE10 没问题，别的没试： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
<script type="text/javascript">
var imgurl = "";
function getImgURL(node) {
    var imgURL = "";
    var file = null;
    if(node.files && node.files[0] ){
        file = node.files[0];
    }else if(node.files && node.files.item(0)) {                                  
        file = node.files.item(0);
    }     
    //这种获取方式支持IE10
    node.select();
    imgURL = document.selection.createRange().text;
    alert(imgURL);  
    var textHtml = "<img src='"+imgURL+"'/>";     //创建img标签用于显示图片  
    alert(textHtml);  
    $(".mark").after(textHtml);  
    return imgURL;  
}
var imgurl = "";
function getImgURL(node) {
    var imgURL = "";      
    var file = null;  
    if(node.files && node.files[0] ){  
        file = node.files[0];   
    }else if(node.files && node.files.item(0)) {                                  
        file = node.files.item(0);     
    }
    //这种获取方式支持IE10    
    node.select();    
    imgURL = document.selection.createRange().text;      
    alert(imgURL); 
    var textHtml = "<img src='"+imgURL+"'/>";     //创建img标签用于显示图片  
    alert(textHtml);  
    $(".mark").after(textHtml);  
    return imgURL;  
}       
</script> 
</head> 
<body>  
    <div style="width:200px; height:210px; border:1px solid red;" id="show">  
        <div class="mark"></div>  
    </div>  
<br>  
<input type="file" value="上传文件" onchange="getImgURL(this)">  
</body>  
</html>

2.火狐和chrome浏览器，其实这个获得的文件路径不是我们能看懂的，它是一个对象，不过浏览器能解析，可能出于浏览器的安全考虑吧，本来不能显示文件路径： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>  
<script type="text/javascript">
var imgurl = "";  
 
function getImgURL(node) {    
    var imgURL = "";      
    try{     
        var file = null;  
        if(node.files && node.files[0] ){  
            file = node.files[0];   
        }else if(node.files && node.files.item(0)) {                                  
            file = node.files.item(0);     
        }     
        //Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径  
        try{  
            //Firefox7.0   
            imgURL =  file.getAsDataURL();    
            //alert("//Firefox7.0"+imgRUL);                           
        }catch(e){  
            //Firefox8.0以上                                
            imgRUL = window.URL.createObjectURL(file);  
            //alert("//Firefox8.0以上"+imgRUL);  
        }  
     }catch(e){      //这里不知道怎么处理了，如果是遨游的话会报这个异常                   
        //支持html5的浏览器,比如高版本的firefox、chrome、ie10  
        if (node.files && node.files[0]) {                            
            var reader = new FileReader();   
            reader.onload = function (e) {                                        
                imgURL = e.target.result;    
            };  
            reader.readAsDataURL(node.files[0]);   
        }    
     }  
    //imgurl = imgURL;  
    creatImg(imgRUL);  
    return imgURL;  
}  
         
function creatImg(imgRUL){   //根据指定URL创建一个Img对象  
    var textHtml = "<img src='"+imgRUL+"'/>";  
    $(".mark").after(textHtml);  
}  
         
</script>  
 
</head>  
 
<body>  
    <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show">  
        <div class="mark"></div>  
    </div>  
<br>  
<input type="file" value="上传文件" onchange="getImgURL(this)">  
</body>  
</html>

3.其余的浏览器。我没有测试，不过国内的其他如360和遨游，等都有两种模式，一种是IE内核，这（1）中可以运行，第二种内核没找到好方法
TAGS: js获取file路径