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

最新推荐文章于 2025-06-11 14:15:59 发布

小运行yuknee

最新推荐文章于 2025-06-11 14:15:59 发布

阅读量1.1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：移动端开发前端开发文章标签：获取本地图片路径 akepath路径解决方法

本文链接：https://blog.youkuaiyun.com/yuknee/article/details/79141634

移动端开发同时被 2 个专栏收录

5 篇文章

订阅专栏

前端开发

5 篇文章

订阅专栏

本文介绍了一种前端技术，用于实现在用户上传图片后立即预览的功能。通过利用浏览器API创建对象URL来解决本地文件路径加密问题，确保预览效果的同时保护用户信息安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

以下就是代码：

<%@ 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出的路径就是本地路径，复制下来能够直接访问本地图片，感谢大家！