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. 元数据性能大比拼：HDFS vs OSS vs JuiceFS

    背景 存储是大数据的基石,存储系统的元数据又是它的核心大脑,元数据的性能对整个大数据平台的性能和扩展能力非常关键.本文选取了大数据平台中 3 个典型的存储方案来压测元数据的性能,来个大比拼. 其中 H ...

  2. echarts图表的封装

    其实echarts官网有个快速上手的教程,一般人看一遍也知道是怎么回事,先给个传送门吧--五分钟上手 引入方式多种多样就自己去官网看了--这里简单介绍echarts怎么用,下方的封装函数比较重要 1. ...

  3. 【转】MySql根据经纬度获取附近的商家

    创建geo表 create table geo( geo_id INT NOT NULL AUTO_INCREMENT, lng float NOT NULL, lat float NOT NULL, ...

  4. linux下core 相关设置

    1)core文件简介core文件其实就是内存的映像,当程序崩溃时,存储内存的相应信息,主用用于对程序进行调试.当程序崩溃时便会产生core文件,其实准确的应该说是core dump 文件,默认生成位置 ...

  5. JVM学习九-（复习）HotSpot 垃圾收集器

    HotSpot 虚拟机提供了多种垃圾收集器,每种收集器都有各自的特点,虽然我们要对各个收集器进行比较,但并非为了挑选出一个最好的收集器.我们选择的只是对具体应用最合适的收集器. 新生代垃圾收集器 Se ...

  6. Android Studio 插件（不定期更新）

    GsonFormat 根据JSONObject格式的字符串,自动生成实体类参数. 安装 1.Android studio File->Settings-->Plugins -->in ...

  7. UIView的常见方法

    - (void)addSubview:(UIView *)view; 添加一个子控件view - (void)removeFromSuperview; 将自己从父控件中移除 - (UIView *)v ...

  8. iOS App程序内多语言国际化实现 By HL

    iOS 多语言设置有很多方式可以实现,之前在做手机思埠1.0时,就对app进行了多语言设置,当时看到很多方法,比如用plist等方式保存键值对的,不过还是用Localisator来国际化最方便 1.添 ...

  9. [技术干货-算子使用] mindspore.scipy 入门使用指导

    1. MindSpore框架的SciPy模块 SciPy 是基于NumPy实现的科学计算库,主要用于数学.物理学.生物学等科学以及工程学领域.诸如高阶迭代,线性代数求解等都会需要用到SicPy.Sci ...

  10. Solution -「AT 3913」XOR Tree

    \(\mathcal{Description}\)   Link.   给定一棵树,边 \((u,v)\) 有边权 \(w(u,v)\).每次操作可以使一条简单路径上的边权异或任意非负整数.求最少的操 ...