【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理
最近在弄一个网页的问题，总结如下。
【问题描述】
页面中包括以下几个部分：1）表单form，供用户输入图片文件；2）iframe1，显示a.php文件的内容，a.php接收客户端图片并保存，后台程序处理图片，生成相关数据文件；3）iframe2，显示b.php文件的内容，b.php读取结果文件对其进行分页显示；
【实现思路】
以上功能主要在于两个问题：
1，form表单提交的形式一般是：input type="sumit"的表单元素配合form的action地址完成提交。此处要求先用a.php处理，在a.php处理完成后用b.php进行后续处理，如果使用JavaScript修改form的target和action进行两次提交，前后顺序得不到保证。思路是：form表单提交至a.php，在a.php的文件中使用document.ready事件，通过DOM元素访问方式：parent.document.getElementById(id)访问到iframe2控件，设置其src属性值为b.php即可保证处理顺序；
2，在iframe2中进行分页显示b.php的内容：思路是b.php中使用ajax异步请求显示数据，编写c.php文件接收请求的页数，然后读取文件数据以jason形式将列表传送给b.php，由b.php对数进行HTML标签包装；
【实现的详细代码】
- 前端显示页面：
<form name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" accept="image/*" onchange="preview();"/> </form> <iframe name="hidden_frame1" frame></iframe>
<iframe name="hidden_frame2" frame></iframe>
function preview() {
var form = document.getElementById("form");
form.target="hidden_frame1";
form.action="a.php";
form.submit();
}
- a.php后台处理页面
<html>
<head>
<meta charset="gbk">
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var iframeSearch=parent.document.getElementById("hidden_frame2");
iframeSearch.src="b.php";
});
</script>
<div>
<!--其他页面内容-->
</div>
</body>
</html>- b.php后台处理页面
<html>
<head>
<style type="text/css">
#list{width:680px; height:530px; margin:50px auto 2px auto; position:relative}
#list ul li{ float:left;width:220px; height:260px; margin:2px}
#list ul li img{width:220px; height:220px}
#list ul li p{line-height:22px}
#pagecount{width:500px; margin:10px auto 2px auto; padding-bottom:20px; text-align:center}
#pagecount span{margin:4px; font-size:14px}
#list ul li#loading{width:120px; height:32px; line-height:32px; border:1px solid #d3d3d3; position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var curPage = 1; //当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: 'pages.php',
data: {'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#list ul").append("<li >loading...</li>");
},
success:function(json){
$("#list ul").empty();
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var li = "";
var list = json.list;
$.each(list,function(index,array){ //遍历json数据列
li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title']+"</a></li>";
});
$("#list ul").append(li);
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
}
//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";
//如果是第一页
if(curPage==1){
pageStr += "<span>首页</span><span>上一页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";
}
//如果是最后页
if(curPage>=totalPage){
pageStr += "<span>下一页</span><span>尾页</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
}
$("#pagecount").html(pageStr);
}
$(function(){
getData(1);
$(document).on("click", "#pagecount span a", function() {
var rel=$(this).attr("rel");
if(rel) getData(rel);
});
});
</script>
</head>
<body>
<div >
<div >
<ul></ul>
</div>
<div ></div>
</div>
</body>
</html>- pages.php页面传送json数据
<?php
include_once('connect.php');
$page = intval($_POST['pageNum']);
$result = mysql_query("select id from food");
$total = mysql_num_rows($result);//总记录数
$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数
$startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
//print_r($arr);
echo json_encode($arr);
?>注：分页显示过程参考：http://www.daimajiayuan.com/sitejs-17717-1.html