PHP处理从HTML接收的图、文数据并进行有序混排

以新闻作为例子

问题:新闻内容有标题(title)、图片(image)、文字(content)三种数据存在形式,我从HTML获取的数据是三组数组:title[]、image[]、content[];这三个数组的元素需要按顺序存进paragraphs[]中。

解决方案:
1、添加:
(1)在HTML中创建id=”paragraph_list”的div块,添加的内容class=”paragraphs”,id=”paragraph’+i+‘”,其中变量i的值为:

            if($(‘.paragraphs‘).length === 0) {
                var i = 0;
            } else {
                var last = $(‘.paragraphs‘).last().attr(‘id‘);
                var i = parseInt(last.substring(9, last.length));
                i = i + 1;
            }


在#paragraphs块里添加一个type=”hidden”,name=”xxxOrder[]”,value=””‘+i+‘””的input输入框。添加的时候在#paragraph_list最后一条子元素后面插入最新的#paragraphs
(2)php获取六组数组:$newsTitleOrder、$newsTitle、$newsContentOrder、$newsContent、$newsImageOrder、$files,进行如下处理:

        $news_image = array();
        for($i = 1; $i < sizeof($files); $i ++) {
            $imageId = $imageLogic->uploadImage($files[$i], ‘news‘);
            $news_image[] = array(
                $newsImageOrder[$i-1] => $imageId,
                ‘type‘ => ‘image‘
            );
            unset($imageId);
        }

        $news_title = array();
        for($i = 0; $i < sizeof($newsTitle); $i ++) {
            $news_title[] = array(
                $newsTitleOrder[$i] => $newsTitle[$i],
                ‘type‘ => ‘title‘
            );
        }

        $news_content = array();
        for($i = 0; $i < sizeof($newsContent); $i ++) {
            $news_content[] = array(
                $newsContentOrder[$i] => $newsContent[$i],
                ‘type‘ => ‘text‘
            );
        }

        $arrMerge = array_merge($news_title, $news_content, $news_image);


合并后的数组是无序的,我需要根据数组中子元素的第一个子元素的key进行排序,而且这个key可能不是连续的,因为编辑在添加的过程中可能会把前面已经添加上的内容删除了,多维数组的排序处理如下:

    public function compare($arr1, $arr2) {
        $index1 = array_keys($arr1)[0];
        $index2 = array_keys($arr2)[0];
        if($index1 <= $index2) {
            return false;
        } else {
            return true;
        }
    }
    usort($arrMerge, ‘compare‘);



这下我就能得到我希望得到的结果了

2、编辑
编辑和添加略有差异,主要是图片的处理,因为如果编辑没有修改图片PHP接收的$files对应的元素为空,关键在于如何对数据库中原有图片进行取舍
(1)HTML展示原有图片的时候,需要php把原有图片id传递过来:

        $paragraphs = json_decode($paragraphs);
        $paragraph  = array();
        foreach($paragraphs as $list) {
            if($list->type == ‘image‘) {
                $paragraph[] = array(
                    ‘id‘      => $list->id,
                    ‘type‘    => $list->type,
                    ‘content‘ => $imageLogic->getImageUrl($list->id)
                );
            } else {
                $paragraph[] = array(
                    ‘type‘    => $list->type,
                    ‘content‘ => $list->content
                );
            }
        }


在图片的.paragraphs块里添加type=”hidden”,name=”oldImageId[]”,vlaue={{原有图片id}}的input输入框
(2)php接收的时候会多一个数组$oldImageId,创建新图片数组的时候只要加一个判断:

        $news_image = array();
        for($i = 1; $i < sizeof($files); $i ++) {
            if($files[$i]->getName()) {
                $news_image[] = array(
                    $newsImageOrder[$i-1] => $imageLogic->uploadImage($files[$i], ‘news‘),
                    ‘type‘ => ‘image‘
                );
            } else {
                $news_image[] = array(
                    $newsImageOrder[$i-1] => $oldImageId[$i-1],
                    ‘type‘ => ‘image‘
                );
            }
        }


其他的与添加一致

时间: 2024-11-06 17:32:39

PHP处理从HTML接收的图、文数据并进行有序混排的相关文章

M?a?y?a? ?2?0?1?2? ?破?解?安?装?全?图?文?教?程

在学习U3D的过程中,我们要用到Maya这个工具,(当然你也可以用其他类似的), 我在安装破解 Maya 2012 的过程当中,走了一些弯路,通过搜索发现,网上关于Maya 破解的文章大多语焉不详,为了让网上用此软件的朋友避免多走弯路,特此将我安装破解 Maya 2012 的全过程截屏下来,以便对网友有所帮助. 下载完成后,会出现这个画面: 单击 Install 开始安装.过程有点慢哦. 不用犹豫了,当然是 I Accept.下一步继续. 打开图一所示的 Crack 文件夹,打开 install

CSS基础学习十九:CSS布局之图文混排,图像签名,多图拼接和图片特效

学习了CSS布局的定位和浮动,我们可以简单地做出很多排版和内容拼接.今天就来做几个简单的实例展示现在 流行的DIV+CSS布局的方便好用之处.顺便也说一下CSS3新增的样式属性box-shadow和属性transform. 一图文混排 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

c#网络通信框架networkcomms内核解析之六 处理接收到的二进制数据

在networkcomms通信系统中,服务器端收到某连接上的数据后,数据会暂时存放在"数据包创建器"(PacketBuilder)中,PacketBuilder类似一个流动的容器,收到的数据被服务器处理完成后,相应在二进制数据,会从存储他的PacketBuilder中删除. 我们知道在networkcomms的消息体系中,传送的数据的第一个字节用来存储数据包包头长度,解析出数据包包头后,包头中包含数据包长度.所以在读入进入PacketBuilder中的数据,会根据第一个字节中存储的数据

【04】AJAX接收服务器返回的数据

AJAX接收服务器返回的数据 readyState 和 status 属性 readyState 属性保存有 XMLHttpRequest 对象的交互状态,从 0 到 4 变化: 0 :未初始化(还没有调用send()方法): 1:载入(已调用send()方法,正在发送请求): 2:载入完成(send()方法执行完成,已经接收到全部响应数据): 3:交互(正在解析响应数据): 4:完成(响应数据解析完成,可以在客户端调用了). status 属性保存有 XMLHttpRequest 对象与后台交

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]

chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文: 默认情况下如下图 Y轴并不是从0开始,这样折现图的幅度会很大,不是正常的幅度,解决办法如下, 示例代码: window.onload = function () { var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartDat

用旭日图展示数据的三种方法

什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中,是内层包含外层的关系. 在实际项目中使用旭日图,可以更细分溯源分析数据,真正了解数据的具体构成.而且,旭日图不仅数据直观,而且图表用起来特别炫酷,分分钟拉高数据汇报的颜值!很多数据场景都适合用旭日图,比如,在销售汇总报告中,方便看到每个店铺的销售业绩分布(如下图): 做旭日图的三种方法 1. 用E

vlc-android对于通过Live555接收到音视频数据包后的处理分析

通过ndk-gdb跟踪调试vlc-android来分析从连接到RTSP服务器并接收到音视频数据包后的处理过程. 首先,从前面的文章有分析过vlc-android的处理过程通过线程函数Run()(Src/input/input.c)来处理的,代码如下: [cpp] view plaincopy static void *Run( void *obj ) { input_thread_t *p_input = (input_thread_t *)obj; const int canc = vlc_s

jQuery提交Json数据到Webservice,并接收返回的Json数据

jQuery ajax webservice:get 和 post 一.GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; // 这里要直接使用JOSN对象 $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: "/WebServices/ProductPropertyWebServi

使用echarts实现了一个折现图,数据是一天24小时

arr //你的数据 dataZoom : { show: true, realtime: true, startValue: arr.length - 240, endValue: arr.length } 使用echarts实现了一个折现图,数据是一天24小时,每隔30s从数据库取一次数据,但是这样可读性很低.所以需要在加载图片后,显示最近两个小时的数据,但是dataZoom只能控制起始值,用此方法来显示最近两小时的数据 原文地址:https://www.cnblogs.com/ronle/