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

分为两部分,自己去判断浏览器的类型,然后调用不同函数,一定要引入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="上传文件" οnchange="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="上传文件" οnchange="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

  • 1
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值