最近项目要实现一个用户上传图片之后能够进行预览功能，由于计算机不予许浏览器获取到本地资源的真实路径，防止被窃取信息，使用原本的方法获取到的本地路径却是被加密处理过的，无法直接使用。经过一番查阅终于找到了一个比较实用的方法，亲测可以使用，所以来进行记录一下，也分享给大家，以供参考。
-
<%@ 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>=
*
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出的路径就是本地路径，复制下来能够直接访问本地图片，感谢大家！
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/531.html