HTMl代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="{:url('imgs/upload')}" method="post" enctype="multipart/form-data">

    <input type="file" name="imgs[]" multiple="multiple">

    <input type="submit" value="提交"/>

</form>

</body>

</html>

控制器，视图展示，及添加：

controller添加入库：

<?php

namespace app\index\controller;

use think\Controller;

use think\Db;

class Imgs extends Controller

{
//展示多文件添加视图

    public function imgs(){

        return view();

    }
//接受用户表单提交的值


    public function upload(){

     // 获取表单上传文件

        $files = request()->file('imgs');

        foreach($files as $file){

            // 移动到框架应用根目录/public/uploads/ 目录下

            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

            $data[] = '/uploads/'.$info -> getSaveName();

        }

        $arr['imgs'] = implode(',',$data);

//        echo $arr;die;

        $res = Db::name('admin') -> insert($arr);

        if($res){

            $this -> success('添加成功','show');

        }else{

            $this -> error('添加失败');

        }

    }
//添加入库后，展示视图

    public function show(){

        $data = Db::name('admin') -> select();

//        dump($data);die;

        foreach($data as $k => $v){

            $data[$k]['imgs'] = explode(',',$v['imgs']);

        }

//        dump($data);die;

        return view('show',['data' => $data]);

    }

}

列表HTML代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

{volist name="data" id="vo"}

    {volist name="vo.imgs" id="v"}

    <img src="__ROOT__/{$v}" alt=""/>

    {/volist}

{/volist}

</body>

</html>

tip多文件上传（自找）的更多相关文章

  1. 移动商城第四篇【Controller配置、添加品牌之文件上传和数据校验】

    Controller层配置 编写SpringMVC的配置文件 springmvc.xml <?xml version="1.0" encoding="UTF-8&q ...

  2. vue element-ui 文件上传

    <el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...

  3. 巧用 Jersey RESTful WebService框架解决文件上传乱码

    一.当我们使用jersey框架封装的restful进行文件上传时,会出现中文乱码,试用了过滤器设置编码都不管用.仔细想了很久解决办法,就用一个servelt来代替这个上传的restful接口实现上传的 ...

  4. JavaServlet的文件上传和下载

    关于JSP中的文件上传和下载操作 先分析一下上传文件的流程 1-先通过前段页面中的选择文件选择要上传的图片 index.jsp <%@ page language="java" ...

  5. jquery文件上传控件 WebUploader

    WebUploader是百度开源的一个文件上传组件,因为其操作简洁大方,就在项目中使用了,记录一下. 效果是这样子:  这个样子是默认的效果.  这个是选择上传的图片,可以批量,选择后可以删除和添加更 ...

  6. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  7. 文件上传-pubsec-文件上传大小限制

    文件上传-pubsec-文件上传大小限制 Caused by: java.lang.IllegalArgumentException: ContextPath must start with '/' ...

  8. vue + element 文件上传 并将文件转 base64

    当时有一个需求 是需要用到上传文件这个功能,并且需要将文件转为 base64 给到后台.网上找的全是啥图片转base64 肯定是因为这类需求比较常见.当时有点懵了.后面一想,都他娘是文件啊.然后就找到 ...

  9. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

随机推荐

  1. CF Round #530 Div2

    A. 尛你 \(\%\%\%\) B. 题意:你需要在平面上画 \(n(n \le 10 ^ 9)\) 个 \(1 \times 1\) 的正方形,且顶点都在整点上,每次可以画一条长度为 \(1\) ...

  2. 密码学之PRP/PRF转换引理

    本文将介绍密码学中的PRF.PRP等相关概念,并介绍 PRP/PRF 转换引理及其证明,希望读完本文后,你能对现代密码学中这几个基础概念有所了解. 在开始本文前,希望你有如下预备知识: 现代密码学是怎 ...

  3. Embedded Python应用小结

    转载请注明来源:https://www.cnblogs.com/hookjc/ (1)初始化Python脚本运行环境 Py_Initialize(); (2) 脚本的编译 bytecode = Py_ ...

  4. vue 中 使用 element-ui 发送请求前 校验全部表单，报警告： [Element Warn][Form]model is required for validate to work!

    WEB先生 2020-07-14 20:01:45  754  收藏 分类专栏: vue 文章标签: vue js 版权 报这种错可能有以下两种情况 1.属性绑定错误,确保绑定的是  :model  ...

  5. AppiumForWin安装

    尝试安装Windows版本的Appium 参考:http://www.cnblogs.com/fnng/p/4540731.html 第一步:安装node https://nodejs.org/en/ ...

  6. Flask中请求数据的优雅传递

    当一个请求到来时,浏览器会携带很多信息发送发送服务端.在Django中,每一个处理函数都要传入一个request的参数,该参数携带所有请求的信息,也就是服务端程序封装的environ(不明白该参数可以 ...

  7. 「微前端实践」使用Vue+qiankun微前端方案重构老项目的本地验证

    10月份换了新的工作,参与完一个月的需求迭代后,接到了项目重构的任务.简单来说,需要在短时间内提出方案设想,同时进行本地验证,最终需要拿出一套技术替换方案来.于是,埋头苦干了一个月,总算干了点成绩出来 ...

  8. java集合专题 （ArrayList、HashSet等集合底层结构及扩容机制、HashMap源码）

    一.数组与集合比较 数组: 1)长度开始时必须指定,而且一旦指定,不能更改 2)保存的必须为同一类型的元素 3)使用数组进行增加/删除元素-比较麻烦 集合: 1)可以动态保存任意多个对象,使用比较方便 ...

  9. kali linux清理垃圾

    sudo apt-get autoclean               # 清理旧版本的软件缓存  sudo apt-get clean                      # 清理所有软件缓 ...

  10. [数分笔记]Dedekind切割定理的证明

    1.定理内容 Dedekind切割定理:设是实数集的一个切割,则或者有最大数,或者有最小数. 2.证明过程 设是中所有有理数所构成的集合,是中所有有理数所构成的集合 从而构成一个有理数集的切割 有三种 ...