标签:
最近在弄一个网页的问题,总结如下。
【问题描述】
页面中包括以下几个部分: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 id="form" name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file" accept="image/*" onchange="preview();"/> </form> <iframe name="hidden_frame1" id="hidden_frame" frameborder="0"></iframe>
<iframe name="hidden_frame2" id="hidden_frame1"frameborder="0"></iframe>
function preview() { var form = document.getElementById("form"); form.target="hidden_frame1"; form.action="a.php"; form.submit(); }
<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>
<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 id=‘loading‘>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 id="main"> <div id="list"> <ul></ul> </div> <div id="pagecount"></div> </div> </body> </html>
<?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
iframe+javascript实现一个表单提交后多个处理文件按序处理
标签:
原文地址:http://www.cnblogs.com/imagezy/p/4602875.html