轻松实现图片上传并回显
2014-09-20 10:41
260 查看
http://narutolby.iteye.com/blog/1449908
图片上传及文件上传，前端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中显示。
大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。
Html代码
<!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代码
<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函数如下：
Js代码
function showPic(path){
$('img').attr('src','file/'+path).next('span').css('visibility','visible');
}
它的作用就是将img标签的src指向传过来的图片路径，这时候浏览器就回去加载这个图片，这样就轻松的实现了图片上传并迅速回显的功能，我附上了实现这个功能的整个工程，是一个eclipse的maven工程，需要通过本机maven命令下载依赖包。
图片上传及文件上传，前端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中显示。
大家知道，form表单的post请求是同步请求，如果没有指定target属性，默认情况下提交后会刷新页面，想要做到提交请求后不页面不动即能回显上传的图片，这就需要一些处理，这里我用到了隐藏的iframe，将form表单的target指向iframe的名字，这样form表单提交后返回的结果将在iframe中显示。
Html代码
<!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代码
<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函数如下：
Js代码
function showPic(path){
$('img').attr('src','file/'+path).next('span').css('visibility','visible');
}
它的作用就是将img标签的src指向传过来的图片路径，这时候浏览器就回去加载这个图片，这样就轻松的实现了图片上传并迅速回显的功能，我附上了实现这个功能的整个工程，是一个eclipse的maven工程，需要通过本机maven命令下载依赖包。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Retrofit 2.0 超能实践（三），轻松实现文件/图片上传
- asp下轻松实现将上传图片到数据库的代码
- JS，jQuery轻松实现input图片上传预览功能
- 轻松实现将上传图片到数据库
- Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
- 轻松实现将上传图片到数据库
- Retrofit 2.0 超能实践（三），轻松实现文件/多图片上传/Json字符串
- asp下轻松实现将上传图片到数据库的代码
- Retrofit 2.0 超能实践（三），轻松实现多文件/图片上传/Json字符串/表单
- Retrofit 2.0 超能实践（三），轻松实现文件/多图片上传/Json字符串
- Retrofit 2.0 轻松实现文件/多图片上传/Json字符串
- Retrofit 2.0 轻松实现多文件/图片上传
- 轻松掌握Ruby on Rails上传图片实现技巧
- PHP实现图片简单上传
- JAVA技术实现上传图片水印效果
- [[ASP]上传图片至数据库内功能的实现（OLE对象）
- 图片上传的实现
- ASP上传图片至数据库内功能的实现
- 实现多个图片上传(上传到服务器),在内容框中实现图文混排,并将内容录入clob字段中
- ASP实现图片上传