码迷,mamicode.com
首页 > 编程语言 > 详细

iframe+javascript实现一个表单提交后多个处理文件按序处理

时间:2015-06-26 19:21:37      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:

最近在弄一个网页的问题,总结如下。

 

【问题描述】

页面中包括以下几个部分: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();
}

 

  • 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 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>

 

 

 

  • 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

 

iframe+javascript实现一个表单提交后多个处理文件按序处理

标签:

原文地址:http://www.cnblogs.com/imagezy/p/4602875.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!