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

- 日理万妓 2021-11-11 18:10 668阅读 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>

预览图如下：

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

[SouthEast]: /images/20211109/16397891094e4d8eb9e0bb82c22b70c8.png