必威体育Betway必威体育官网
当前位置:首页 > IT技术

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

时间:2019-08-16 13:11:05来源:IT技术作者:seo实验室小编阅读:82次「手机版」
 

fakepath

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

关键代码

<%@ 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><a href="http://s.jf3q.com">click</a>
	<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

相关阅读

Java实现在线预览–openOffice实现

Java实现在线预览–openOffice实现 简介 之前有写了poi实现在线预览的文章,里面也说到了使

Android开发使用LocationManager实现定位服务

做项目需要获取经纬度信息,学习了下android自带的定位API,简单实现了一下,这里记录一下。废话不多说,先上代码: private String locat

Java服务内存溢出问题解决和总结

最近,公司测试环境服务发现一个问题:一个接口服务,合作方再调接口时,经常会出现连接超时异常(connection reset by peer),紧接着看到服

Linux SIGPIPE信号产生原因与解决方法

TCP 四次握手 产生SIGPIPE的原因 SIGPIPE信号产生的原因: 简单来说,就是客户端程序向服务器端程序发送了消息,然后关闭客户端,服

Swing实现登录页面

Swing实现登录页面,输入用户名和密码正确之后,点击确定按钮可以显示登录成功,输入错误会显示错误,点击重置按钮会将将用户名和密码清

分享到:

栏目导航

推荐阅读

热门阅读