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

【问题描述】

页面中包括以下几个部分：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. 利用python进行数据分析之数据聚合和分组运算

    对数据集进行分组并对各分组应用函数是数据分析中的重要环节. group by技术 pandas对象中的数据会根据你所提供的一个或多个键被拆分为多组,拆分操作是在对象的特定轴上执行的,然后将一个函数应用 ...

  2. CSS3 模拟笑脸

    参考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.html 它还做了舌头... 一开始我都是用JS实现的动画  当然了  眼 ...

  3. VC++ win32 多线程 一边画圆一边画矩形

    // WinThreadTest.cpp : Defines the entry point for the application. // #include "stdafx.h" ...

  4. 自己动手写List集合(C#)

    平时经常使用微软的List集合,觉得理所应当,这阵子突然意识到学编程学这么久,总不能只生存在某个平台某种语言下面.我觉得要跳出这个框,而数据结构是经常用到的,所以呢,作为一个有志向的程序员应该学会它. ...

  5. 转: object 和embed 标签播放flash

    一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和 EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBE ...

  6. 射频识别技术漫谈(14)——Mifare S50与S70的存取控制

    存取控制指符合什么条件才能对卡片进行操作. S50和S70的块分为数据块和控制块,对数据块的操作有“读”.“写”.“加值”.“减值(含传输和存储)”四种,对控制块的操作只有“读”和“写”两种. S50 ...

  7. UC/0S2之中断

    中断是计算机系统处理异步事件的重要机制.当异步事件发生时,事件通常是通过硬件向cpu发出中断请求的.在一般情况下,cpu响应这个请求后会立即运行中断服务程序来处理该事件: 为了处理任务延时.任务调度等 ...

  8. js中函数参数基本类型和引用类型的区别

    高级程序设计中说明,所有函数的参数都是按值传递的. 基本类型 向参数传递基本类型的值时,被传递的值会被复制给对应的命名参数 function addTen(num){ num=+10; return ...

  9. 集合ArrayList案例

    1.添加元素,读取 ArrayList n = new ArrayList(); n.Add();//集合中添加元素用Add,分别添加了1,2 n.Add(); foreach (int a in n ...

  10. BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会( dp + dfs )

    选取任意一个点为root , size[ x ] 表示以 x 为根的子树的奶牛数 , dp一次计算出size[ ] && 选 root 为集会地点的不方便程度 . 考虑集会地点由 x ...