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. echarts图表的封装

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

  2. IDE连接数据库时测试Test Connection 无法点击

    问题: IDE连接数据库时测试Test Connection 无法点击 解决: IDE缺少对应的驱动 第一步: 点击驱动 第二步: 下载驱动 注意:不同版本的驱动下载位置不同,此版本为2017

  3. Android中ActionBar和ToolBar添加返回箭头

    感谢大佬:https://blog.csdn.net/baidu_32682229/article/details/77927745 ActionBar添加返回箭头 //onCreate方法中 Act ...

  4. python中一个经典的参数错误

    直接上代码 class Company: def __init__(self, name, staffs=[]): self.name = name self.staffs = staffs def ...

  5. Java基础复习(七)

    一.基本语法 1. java没有sizeof.goto.const这些关键字,但不能用goto.const作为变量名,虽然可以用sizeof,但为啥非得要用这个呢. 2.十六进制数以0x或0X开头: ...

  6. ios xib约束适配要点

    基本上以下几点就能解决除横屏以外的适配问题 1.页边距约束 (Leading and Trailing space) 页边间距约束分前部间距约束(Leading space constaint)和尾部 ...

  7. SYSTEM表空间满,解决方法

    SYSTEM表空间是Oracle创建数据库时候自动创建的,每个Oracle数据库都会有SYSTEM表空间,而且SYSTEM表空间总是要保持在联机模式下,因为其包含了数据库运行所要求的基本信息,如:数据 ...

  8. Solution -「JOISC 2021」古老的机器

    \(\mathcal{Description}\)   Link.   这是一道通信题.   对于长度为一个 \(n\),仅包含字符 X, Y, Z 的字符串 \(s\),将其中 \(n\) 个字符按 ...

  9. v78.01 鸿蒙内核源码分析(消息映射篇) | 剖析LiteIpc(下)进程通讯机制 | 百篇博客分析OpenHarmony源码

    百篇博客分析|本篇为:(消息映射篇) | 剖析LiteIpc(下)进程通讯机制 进程通讯相关篇为: v26.08 鸿蒙内核源码分析(自旋锁) | 当立贞节牌坊的好同志 v27.05 鸿蒙内核源码分析( ...

  10. Spring常用配置使用示例

    上篇介绍了Spring配置的基本情况,本篇介绍Spring常用配置具体如何使用.关于基础的配置,比如Configuration之类的就不示例,主要示例相对用的比较多同时可能比较复杂的标签或属性. 1) ...