js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径

时间：2023-01-27 09:06:20

分为两部分，自己去判断浏览器的类型，然后调用不同函数，一定要引入jQuery，上面是我的Jquery的路径

在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="软件工程概论/软件工程实验原型/js/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;
}

</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="软件工程概论/软件工程实验原型/js/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）中可以运行，第二种内核没找到好方法


4.推荐出处

https://developer.mozilla.org/zh-CN/docs/DOM

http://www.w3.org/TR/FileAPI/#dfn-revokeObjectURL

https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Using_object_URLs_to_display_images

标签：

相关文章