本文主要演示的是基于ThinkPHP5+layui框架,实现多图上传以及预览。本案例中通过实现EY内容管理系统的文章发布功能中的相册图集功能,使用layui框架的文件上传模块实现多图上传以及展示,在《基于ThinkPHP5+layui框架,实现图片上传以及图片预览》中有关于文章缩略图的上传。
第一步,在文章发布页面实现相册图集的HTML代码,这里仅做展示,相关代码如下:
第二步,写几行CSS代码,不至于图片上传之后页面乱的惨不忍睹。
第三步,通过layui框架的upload模块,执行多图上传的实例,相关的JS代码如下:
多图上传中,我使用的文件上传接口与单图上传一致,具体可以参考《 基于ThinkPHP5+layui框架,实现图片上传以及图片预览》,不多解释。我觉得需要解释的是多图上传中我定义了一个i和j来区分上传的每一个文件,因为layui的form模块暂不支持input的数组提交。
第四,上传几张图看一下多图上传后的效果:
关于图片的信息如下:
第五,在文章发布提交的方法中处理图片信息,并提交到数据库。我用了一个thumbs_count来告诉后台程序究竟上传了几个文件,其实不这么做也可以的,只要知道上传了几个文件就行。