准备资料

下载layui

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8">
  6.   <title>图片上传</title>
  7.   <link rel="stylesheet" href="layui-v2.2.5/layui/css/layui.css" media="all">
  8. </head>
  10. <body>
  11.   <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  12.     <legend>上传多张图片</legend>
  13.   </fieldset>
  15.   <div class="layui-upload">
  16.     <button type="button" class="layui-btn" id="test2">多图片上传</button>
  17.     <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
  18.       预览图：
  19.       <div class="layui-upload-list" id="demo2"></div>
  20.     </blockquote>
  21.   </div>
  22.   <script src="layui-v2.2.5/layui/layui.js"></script>
  23.   <script src="layui-v2.2.5\layui\jquery-3.3.1.min.js"></script>
  24.   <script>
  25.     layui.use('upload', function () {
  26.       var upload = layui.upload;
  27.       //多图片上传
  28.       upload.render({
  29.         elem: '#test2',
  30.         url: 'imgdemo',
  31.         multiple: true,
  32.         before: function (obj) {
  33.           //预读本地文件示例，不支持ie8
  34.           obj.preview(function (index, file, result) {
  35.             $('#demo2').append('<img src="' + result + '" alt="' + file.name +
  36.               '" class="layui-upload-img">')
  37.           });
  38.         },
  39.         done: function (res) {
  40.           //如果上传失败
  41.           if (res.code == 404) {
  42.             return layer.msg(res.msg);
  43.           }
  44.           //上传成功
  45.           if (res.code == 1) {
  46.             return layer.msg(res.photo);
  47.           }
  48.         }
  49.       });
  51.     });
  52.   </script>
  53. </body>
  55. </html>

tp5 代码：

  1. 	public function imgdemo(Request $request){
  2. 	//接收上传的文件
  3. 	$file = $this->request->file('file');
  5.             if(!empty($file)){
  6. 				//图片存的路径
  7. 				$imgUrl= ROOT_PATH . 'public' . DS . 'uploads'. '/' .  date("Y/m/d");
  9. 				// 移动到框架应用根目录/public/uploads/ 目录下
  11.                 $info = $file->validate(['size'=>1048576,'ext'=>'jpg,png,gif'])->rule('uniqid')->move($imgUrl);
  12.                 $error = $file->getError();
  13.                 //验证文件后缀后大小
  14.                 if(!empty($error)){
  15.                     dump($error);exit;
  16.                 }
  17.                 if($info){
  18.                     // 成功上传后 获取上传信息
  19.                 //获取图片的名字
  20. 				$imgName = $info->getFilename();
  21. 				//获取图片的路径
  22. 				$photo=$imgUrl . "/" . $imgName;
  24.                 }else{
  25.                     // 上传失败获取错误信息
  26.                     $file->getError();
  27.                 }
  28.             }else{
  29.                 $photo = '';
  30.             }
  31.     if($photo !== ''){
  32.         return ['code'=>1,'msg'=>'成功','photo'=>$photo];
  33.     }else{
  34.         return ['code'=>404,'msg'=>'失败'];
  35.     }
  37. }

效果图如下

服务端

注意（报错可能是资源引用路径错误）

thinkphp5+layui多图片上传的更多相关文章

  1. ThinkPHP5+Layui实现图片上传加预览

    html代码 <div class="layui-upload"> <button type="button" class="lay ...

  2. .net mvc + layui做图片上传（二）—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  3. .net mvc + layui做图片上传（一）

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  4. .Net之Layui多图片上传

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的up ...

  5. php+layui实现图片上传与预览

    端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. layui 实现图片上传和预览

    [学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面 前台实现 <#--图片名--><input id="fileName" type=&qu ...

  7. layui实现图片上传

    页面代码: <style> .uploadImgBtn2{ width: 120px; height: 92px; cursor: pointer; position: relative; ...

  8. layui框架图片上传至服务器

    注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...

  9. thinkphp+layui多图上传（1）thinkphp5+layui实现多图上传保存到数据库，可以实现图片自由排序，自由删除。

    公共css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width: ...

随机推荐

  1. 并发量，tps，qps

    QPS/TPS/并发量/系统吞吐量的概念 2017年08月13日 17:24:47 阅读数:10682 我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个 ...

  2. spring-sevlet简单配置

    <<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www ...

  3. TCP定时器 之 延迟确认定时器

    TCP在收到数据段但是无需马上确认时设定,如果在超时时间之内有数据要发送到对端,则确认会随着数据一起发送,即捎带ACK,如果达到超时时间则执行定时器回调立即发送ack: 启动定时器: 延迟确认定时器调 ...

  4. opencart升级 各种坑 没有主题，没有扩展，权限等问题

    1.后台导航菜单没有扩展功能(扩展不显示) 2.只要是报错显示DIR_XXXX  基本都是config.php 和  admin/config.php  这两配置文件有关 我这问题是config.ph ...

  5. Linux环境快速搭建elasticsearch6.5.4集群和Head插件

    https://blog.csdn.net/boling_cavalry/article/details/86358716

  6. 如何将打印内容转换为bmp位图文件

    bmp是一种与硬件设备无关的图像文件格式,使用非常广.它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BblP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8 ...

  7. 手动清空微信PC客户端数据

    微信PC客户端,用久了之后,会产生大量数据,包括聊天记录.聊天图片.视频等等,非常占存储空间,除非很重要的聊天记录或文件,建议额外保存,其他的可以手动删掉就好,可以节省存储空间. 1.找到[C:\Us ...

  8. KNN原理小结

    K近邻法(K-nearest neighbors,KNN)既可以分类,也可以回归. KNN做回归和分类的区别在于最后预测时的决策方式.KNN做分类时,一般用多数表决法:KNN做回归时,一般用平均法. ...

  9. flutter 屏幕宽高 状态栏高度

    MediaQuery.of(context) 包含了一些屏幕的属性: size : 一个包含宽度和高度的对象,单位是dp print(MediaQuery.of(context).size); //输 ...

  10. Spring AOP junit错误整理

    1.[spring][Xlint:invalidAbsoluteTypeName]error 首先说一下最基本的错误,使用AOP的pointcut的expression表达式必须是正确的,表达式规则相 ...