美文网首页
Thinkphp5.1+bootstrap插件多图片上传图解教程

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

作者: 挤时间学习的阿龙 | 来源:发表于2019-10-16 23:09 被阅读0次

前言:目前常用的后台框架比较多,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遍,做到自己不看视频,看案例的代码,哪怕是付部分复制代码,可以单独的做出来,这套多图上传完全可以弄到自己项目里头去的。

相关文章

网友评论

      本文标题:Thinkphp5.1+bootstrap插件多图片上传图解教程

      本文链接:https://www.haomeiwen.com/subject/zmcayctx.html