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

【问题描述】

页面中包括以下几个部分：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

【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理的更多相关文章

  1. 通过jquery实现form表单提交后不跳转页面，保留当前页面

    jquery代码: <script type="text/javascript" src="../js/jquery-1.8.3.min.js">& ...

  2. golang-web框架revel一个表单提交的总结

    这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...

  3. form + iframe 获取表单提交后返回的数据

    原理: submit 提交表单没有回调函数,但是可以用iframe来接收返回结果,最后进行格式转换就ok了: 原文地址: http://blog.csdn.net/simeng_1016/articl ...

  4. 怎么实现form表单提交后不重新刷新当前页面

    怎么实现表单提交后不重新刷新当前页面     如何实现表单提交后不重新刷新当前页面 <form name='form1' id='form1' action='/xbcw/cw/xx_xx.ac ...

  5. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  6. PHP关于表单提交 后 post get分页

    PHP关于表单提交后分页函数的那点事--POST表单分页实现   phpfunctionclass加密inputjavascript     说到分页,其实你在Google一搜一大把.大部是通过GET ...

  7. AngularJS 表单提交后显示验证信息与失焦后显示验证信息

    虽然说AngularJS的实时表单验证非常有用,非常高效方便,但是当用户还没有完成输入时便弹出一个错误提示,这种体验是非常糟糕的. 正常的表单验证逻辑应该是在用户提交表单后或完成当前字段中的输入后,再 ...

  8. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  9. DedeCMS实现自定义表单提交后发送指定QQ邮箱法

    https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_3_dg&wd=dedecms 邮箱&oq=d ...

随机推荐

  1. BZOJ 1097: [POI2007]旅游景点atr( 最短路 + 状压dp )

    先最短路预处理, 然后状压就行了 -------------------------------------------------------------------------- #include ...

  2. 无法在web服务器上启动调试，服务器不支持对ASP.NET 或ATL Server应用程序进行调试。

    无法在web服务器上启动调试,服务器不支持对ASP.NET 或ATL Server应用程序进行调试. a>.DCOM配置里的属性灰色不可用的解决方法,   1>.管理工具->组件服务 ...

  3. 字节转换/编码转换全为转载GBK,BIG5,utf8,unicode

    C/C++中的字节转换 宽字节转单字节 :size_t wcstombs( char *mbstr, const wchar_t *wcstr, size_t count ); 单字节转宽字节 :si ...

  4. 调色板QPalette类用法详解（附实例、源码）（很清楚：窗口背景色 前景色 按钮的颜色 按钮文本的颜色 ）

    http://blog.csdn.net/rl529014/article/details/51589096

  5. 在IT公司，project manager 基本上和秘书，助理什么的差不多

    我感觉非常有道理,所以我不做Leader,哈哈哈

  6. HDU2577：How to Type(DP)

    Problem Description Pirates have finished developing the typing software. He called Cathy to test hi ...

  7. find the most comfortable road（并差集，找差值最小的权值）

    find the most comfortable road Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  8. HDU 2665(Kth number-区间第k大[内存限制+重数])

    Kth number Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  9. Difference between LINQ to SQL and LINQ to Entity（DataContext and DbContext）

    http://msdn.microsoft.com/en-us/library/cc161164.aspx http://stackoverflow.com/questions/2443836/wha ...

  10. Name lookup

    Name lookup Types of lookup Argument-dependent lookup Template argument deduction overload resolutio ...