您的位置：首页 > 其它

用户上传图片后实现图片预览效果（解决fakepath路径问题）

2016-09-09 15:49 991 查看

注意：实现这个效果最重要的就是获取到用户上传到网页上的真实路径。

关键代码：

<%@ 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>
最后的效果如下：



如有疑问可直接联系qq：1913284695
或者微信：fyydbc
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航