Thinkphp5.1+bootstrap插件多图片上传图解教程

前言：目前常用的后台框架比较多，Layui H+ admin Xadmin 等等，有基于bootstarp的、jQ的等。如果要在这些基础上去使用多图上传插件，每种的js语句和DOM操作都不一样。
我也是刚学会1种后台框架的多图，大家可以使用在新窗口（链接）中上传多图管理的方式，来做到一个多图上传使用不同后台框架。
毕竟后台都是自己使用，不是面向客户，虽然不是完美，但是功能实现和使用上并没有差太远，毕竟实现了，新手的学习信心会更强。

1、演示

image.png image.png image.png image.png

我的这个提示有点简单大家可以弄个样式即可。因为不同框架后台返回的信息格式均不一样，就做个最简单的通用。

你可以把这个新弹出的页面做成多图编辑页面，在对应信息后面加上一个按钮
（1）前台列表页关于链接按钮

<a title="上传图片"  onclick="x_admin_show('多图','{:url(\'Office/UploadImg\')}?id={$vo.id}')" href="javascript:;">
                    <i class="layui-icon">&#xe64a;</i>
                </a>

（2）我的数据库模型文件，如果你要使用下面的方法的话

image.png

（3）后台，记得要引入

use app\admin\model\OfficeModel;
    //多图上传页面显示
    public function UploadImg()
    {
        // 获取前台提交过来的数据
        $officesId = Request::param('id');
        // 通过用户id查询需要更新用户的所有数据
        $office = OfficeModel::get($officesId);
        // 将数据赋值给模版
        $this->view->office = $office;
        // 测试上传页面
        return $this->fetch();
    }

    //多图上传编辑页面
    public function add_img(){
        // 实例化模型
        // 获取提交的数据
        $data = Request::param();
        $data['imagepath']=implode(',', $_POST['imagepath']);
        var_dump($data['imagepath']);
        $m = new OfficeModel();
        $res = $m->save([
            'title' => $data['title'],
            'imagepath' => $data['imagepath'],
            'username' => Session::get('username'),
            'time' => time(),
        ], ['id' => $data['id']]);
        // 验证修改结果
        if ($res) {
            // 返回修改成功信息
            return '<p style="text-align: center;">修改成功！</p>';
        } else {
            // 返回修改失败信息
            return '<p style="text-align: center;">修改失败！</p>';
        }
    }

你如果不想单独图片管理，也可以做成添加页面或修改页面。
列表页后台我就不给大家了，看自己的项目，如果这个文章还是看不懂，建议去汇找一套TP5网站或者个人博客过程，跟1-2遍，做到自己不看视频，看案例的代码，哪怕是付部分复制代码，可以单独的做出来，这套多图上传完全可以弄到自己项目里头去的。