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

【问题描述】

页面中包括以下几个部分：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. MYSQL异常和错误机制

    BEGIN ; ; ; START TRANSACTION; call put_playerbehavior(i_playerid,i_gameid,i_channelid,i_acttime,@a) ...

  2. [LeetCode]题解（python）：121-Best Time to Buy and Sell Stock

    题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock/ 题意分析: 给定一个数组,代表array[i] 代表第i天的价 ...

  3. Sublime Text2

    Ctrl+L选择整行(按住-继续选择下行) Ctrl+KK 从光标处删除至行尾 Ctrl+Shift+K 删除整行 Ctrl+Shift+D 复制光标所在整行,插入在该行之前 Ctrl+J 合并行(已 ...

  4. Poj 2232 Moo Volume(排序)

    题目链接:http://poj.org/problem?id=2231 思路分析:先排序,再推导计算公式. 代码如下: #include <iostream> #include <a ...

  5. 【解答】关于内核中没开MMU之前的虚拟地址物理地址转换问题

    1. 内核没开MMU之前有虚拟地址吗?没有MMU哪来的虚拟地址? 答:有,由于载入时地址和执行时地址不同导致的没打开MMU之前也会有虚实地址问题. 2. 载入时地址和执行时地址什么差别.为什么有这样的 ...

  6. ExtJs 4 的filefield上传后 返回值success接受不正常

    问题解决了,我修改了返回类型为setContentType("text/html")可以正确解析了,感到很奇怪,其他的地方使用setContentType("applic ...

  7. SSIS: 使用最大ID和最大日期来增量更新表

    简单三步: 1.  新增变量 MaxID和MaxCreateDate以及Variable 2.  放置一个 Execute SQL  Task ,用SQL 来获取 MaxID和MaxCreateDat ...

  8. java线程池分析和应用

    比较 在前面的一些文章里,我们已经讨论了手工创建和管理线程.在实际应用中我们有的时候也会经常听到线程池这个概念.在这里,我们可以先针对手工创建管理线程和通过线程池来管理做一个比较.通常,我们如果手工创 ...

  9. A.归并排序

    归并排序 (求逆序数) 归并排序:递归+合并+排序 时间复杂度:O(n logn)    空间复杂度:O(n) 用途:1.排序  2.求逆序对数 Description In this problem ...

  10. Spring注解配置

    配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http:// ...