轻松实现图片上传并回显 -

narutolby

浏览: 251993 次
性别:
来自: 北京

最近访客更多访客>>

ruanpanliang

wlj5240

新的开始2015

zheng19851

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

轻松实现图片上传并回显

博客分类：

web前端
java
struts

css jquery struts html

图片上传及文件上传，前端html实现文件上传和普通的向后台传参数不同，必须用到form表单，同时form标签必须加上enctype="multipart/form-data"属性，method必须为post，表单中的input的type为file，这样前端上传文件的工作就完成了，这里后台文件的存储不做详细的介绍，因为用到的是struts2，文件上传的功能已经封装好了，但是还是需要注意几点，action中类型为File的属性名必须和input标签的name相同，同时action中必须有contentType和fileName属性，这里不是本文讲的重点就不做详细介绍了。
大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload Image Demo</title>
<script type="text/javascript" src="js\jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   function upload(){
	   $('form').submit();
	   $('img').attr('src','img/vote_img_loading.png')
   }
   $(document).ready(function(){
	   $(':input[type=file]').change(upload);
   });
   
   function showPic(path){
	   $('img').attr('src','file/'+path).next('span').css('visibility','visible');
	   
   }

</script>
<style type="text/css">
.pic {
	position: relative;
	width: 100px;
	height: 100px;
	float: left;
	display: inline;
	margin: 0 5px 0 0;
	cursor: pointer;
	overflow: hidden;
}

.pic span {
	position: relative;
	color: white;
	margin: -20px 0 0;
	display: block;
	height: 20px;
	width: 100px;
	text-align: center;
	overflow: hidden;
	line-height: 20px;
    background: url(img/template_list_titlebg.png) ;
} 

.pic form {
	position: absolute;
	width: 100px;
	height: 100px;
	overflow: hidden;
	z-index: 10;
	margin: -100px 0 0;
}

.pic input {
	font-size: 100px;
	cursor: pointer;
	-moz-opacity: 0;
	filter: alpha(opacity = 0);
	opacity: 0;
	background: none;
	border: none;
	margin: -10px 0 0 -650px 9;
}
</style>
</head>
<body>
    <iframe style="display:none" name="if">
    
    </iframe>
	<div class="pic">
		<img height="100" width="100" src="img/update_pic.png"><span
			style="visibility: hidden">重新上传</span>
		<form enctype="multipart/form-data" method="POST" action="upload.action" target="if">
			<input type="file" name="upload"/>
		</form>
	</div>
</body>
</html>

关于iframe中显示的内容是图片回显的关键，以下是返回的内容：

<html>
<head>
</head>
<body>
 <script type="text/javascript">
 var pid = window.location.search.split('=')[1];
 top.window.showPic(pid);
 
 </script>
</body>
</html>

可以看到返回的内容很简单，就是一段javascript代码，因为当form表单提交后，我做了url重定向，并把图片的存储路径作为重定向url的参数，这段javascript代码首先从iframe的location中获得图片的存储路径，然后调用父窗口的showPic函数，并将图片存储路径传入函数，showPic函数是写在父床口中的，为什么可以这么做，因为子窗口可以调用父窗口的函数，但是反过来父窗口调用子窗口的函数是不被允许的。showPic函数如下：

function showPic(path){
	   $('img').attr('src','file/'+path).next('span').css('visibility','visible');
	   
   }

它的作用就是将img标签的src指向传过来的图片路径，这时候浏览器就回去加载这个图片，这样就轻松的实现了图片上传并迅速回显的功能，我附上了实现这个功能的整个工程，是一个eclipse的maven工程，需要通过本机maven命令下载依赖包。

Image.zip (45.7 KB)
下载次数: 357

分享到：

SVG学习笔记 | java实现文件的下载并解决文件名乱码问题

2012-03-10 19:44
浏览 36489
评论(2)
分类:Web前端
查看更多

2 楼青橙--杰 2015-12-01

我是沙发，第一次做，不见怪

1 楼青橙--杰 2015-12-01

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

轻松实现图片上传并回显

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

轻松实现图片上传并回显

评论

发表评论

相关推荐

【转载】java实现动态切换上网IP (ADSL拨号上网

java gc过程

实现html进入编辑状态，在线编辑器中用到的（html的designMode）

HTML5 API——无刷新更新地址 history.pushState/replaceState 方法

java gc算法

document.compatMode介绍

雅虎14条前端优化原则

Pinyin4j解决用拼音对汉字的搜索

前端性能优化

drag-and-drop实现浏览器的图片预览

data类型的Url格式

8个能够有效帮助你提高jQuery代码性能的技巧

前端MVC

三种方法实现js跨域访问

jquery ajaxStart和ajaxStop方法

java实现文件的下载并解决文件名乱码问题

模仿淘宝首页淘工头像的的自由摇摆

css3实现转动

关于jquery 的ajax返回的deferred对象

访问jsp页面Struts标签报错问题！

最近访客更多访客>>