获取用户上传的图片的本地路径实现方法，解决fakepath路径问题

最新推荐文章于 2021-01-19 16:32:11 发布

LTIven

最新推荐文章于 2021-01-19 16:32:11 发布

阅读量799

点赞数

分类专栏：前端开发需要回头看的文章 js 成长轨迹文章标签：读取路径 fakepath

原文链接：https://blog.csdn.net/yuknee/article/details/79141634

版权

前端开发同时被 3 个专栏收录

177 篇文章 3 订阅

订阅专栏

需要回头看的文章

126 篇文章 0 订阅

订阅专栏

成长轨迹

123 篇文章 0 订阅

订阅专栏

最近项目要实现一个用户上传图片之后能够进行预览功能，由于计算机不予许浏览器获取到本地资源的真实路径，防止被窃取信息，使用原本的方法获取到的本地路径却是被加密处理过的，无法直接使用。经过一番查阅终于找到了一个比较实用的方法，亲测可以使用，所以来进行记录一下，也分享给大家，以供参考。

以下就是代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <%@ page language="java" contentType="text/html; charset=utf-8"
    
    
   
   

   
   
    
    
   
   
   
   
    
        
     
     pageEncoding=
     
     "utf-8"%>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <html>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript" src="js/jquery-1.7.2.js">
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript">
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	$(
     
     function(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     function getObjectURL(file){  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     var url=
     
     null   
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     if(
     
     window.createObjectURL!=
     
     undefined){ 
     
     // basic  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		        url=
     
     window.createObjectURL(file)  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    }
     
     else 
     
     if(
     
     window.URL!=
     
     undefined){ 
     
     // mozilla(firefox)  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		        url=
     
     window.URL.createObjectURL(file)  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    } 
     
     else 
     
     if(
     
     window.webkitURL!=
     
     undefined){ 
     
     // webkit or chrome  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		        url=
     
     window.webkitURL.createObjectURL(file)  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    }  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     return url  ;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		}  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		$(
     
     "#face_upload").change(
     
     function(){  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     var objUrl=getObjectURL(
     
     this.files[
     
     0]);  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     var size=
     
     this.files[
     
     0].size;  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     if(size>=
     
     1024000*
     
     10)bottomTip(
     
     "图片超过10M了哦",
     
     0);  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		    
     
     else{  
    
    
   
   

   
   
    
    
   
   
   
   
    
    		         
     
     if(objUrl){  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		                $(
     
     "#xs").attr(
     
     "src",objUrl);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		            }  
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		    }   
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		})  ;
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	})
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <title>Insert title here
     
     </title>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </head>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     <form  enctype="multipart/form-data">
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		商品图片 
     
     <input type="file" id="face_upload"/>
     
     <br>
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     <img src="" height="200" width="200" id="xs"/>
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     </form>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </body>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </html>

预览图如下：

以上console出的路径就是本地路径，复制下来能够直接访问本地图片，感谢大家！

LTIven

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取用户上传的图片的本地路径实现方法，解决fakepath路径问题

最近项目要实现一个用户上传图片之后能够进行预览功能，由于计算机不予许浏览器获取到本地资源的真实路径，防止被窃取信息，使用原本的方法获取到的本地路径却是被加密处理过的，无法直接使用。经过一番查阅终于找到了一个比较实用的方法，亲测可以使用，所以来进行记录一下，也分享给大家，以供参考。以下就是代码：<%@ page language="java" contentType="text/ht...
复制链接

扫一扫