准备资料

下载layui

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>图片上传</title>
<link rel="stylesheet" href="layui-v2.2.5/layui/css/layui.css" media="all">
</head> <body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset> <div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<script src="layui-v2.2.5/layui/layui.js"></script>
<script src="layui-v2.2.5\layui\jquery-3.3.1.min.js"></script>
<script>
layui.use('upload', function () {
var upload = layui.upload;
//多图片上传
upload.render({
elem: '#test2',
url: 'imgdemo',
multiple: true,
before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append('<img src="' + result + '" alt="' + file.name +
'" class="layui-upload-img">')
});
},
done: function (res) {
//如果上传失败
if (res.code == 404) {
return layer.msg(res.msg);
}
//上传成功
if (res.code == 1) {
return layer.msg(res.photo);
}
}
}); });
</script>
</body> </html>

tp5 代码:

	public function imgdemo(Request $request){
//接收上传的文件
$file = $this->request->file('file'); if(!empty($file)){
//图片存的路径
$imgUrl= ROOT_PATH . 'public' . DS . 'uploads'. '/' . date("Y/m/d"); // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->validate(['size'=>1048576,'ext'=>'jpg,png,gif'])->rule('uniqid')->move($imgUrl);
$error = $file->getError();
//验证文件后缀后大小
if(!empty($error)){
dump($error);exit;
}
if($info){
// 成功上传后 获取上传信息
//获取图片的名字
$imgName = $info->getFilename();
//获取图片的路径
$photo=$imgUrl . "/" . $imgName; }else{
// 上传失败获取错误信息
$file->getError();
}
}else{
$photo = '';
}
if($photo !== ''){
return ['code'=>1,'msg'=>'成功','photo'=>$photo];
}else{
return ['code'=>404,'msg'=>'失败'];
} }

效果图如下

服务端

注意(报错可能是资源引用路径错误)

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. 第三天·HTML常用标签

    一·<h1>-<h6> 单词缩写:headHTML的<h1>-<h6>代表了六个等级的标题,其中<h1>标签比较重要,因此要尽量少用.一般& ...

  2. OkHttp3 使用详解

    一,简介 OkHttp 是一个高效的 HTTP 客户端,具有非常多的优势: 能够高效的执行 http,数据加载速度更快,更省流量 支持 GZIP 压缩,提升速度,节省流量 缓存响应数据,避免了重复的网 ...

  3. 《信息安全系统设计基础》--Myod

    Myod 回顾Makefile 任务详情 复习c文件处理内容 编写myod.c 用myod XXX实现Linux下od -tx -tc XXX的功能 main与其他分开,制作静态库和动态库 编写Mak ...

  4. Spring之AOP配置

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  5. PHP CI 框架简单使用(二)

    我们简单认识一下CI框架的MVC.示例代码如下 //CI控制器文件Home.php <?php defined('BASEPATH') OR exit('No direct script acc ...

  6. SAP MaxDB Backup and Restore

    Back up the data and redo log entries from the data and log areas of your database to data carriers ...

  7. P3373 【模板】线段树 2 (未完待续)

    P3373 [模板]线段树 2 强烈安利这个大佬 超赞!!! 题解 本来以为这个题拿着线段树1的板子改改就好了,但是发现事情并没有那么简单,改了两天... 我们看到这个题其实涉及啦乘法和加法两种运算, ...

  8. ShuffleNet V2: Practical Guidelines for Efficient CNN Architecture Design

    1. 摘要 最近,神经网络的架构设计都是基于计算复杂度的间接度量,比如 FLOPs.然而,直接的度量比如运行速度,其实也会依赖于内存访问和平台特性等其它因素. 因此本文建议直接在目标平台上用直接度量进 ...

  9. Eureka入门一(了解概念)

    Eureka注册中心(8761端口) IDEA(开发工具) 1,创建项目勾选Eureka Server 2, 创建yml文件,拷贝配置,下面配置必须为false,意为,该项目不要作为客户端注册,因为本 ...

  10. 使程序在Linux下后台运行,程序运行前后台切换

    一.为什么要使程序在后台执行 我们计算的程序都是周期很长的,通常要几个小时甚至一个星期.我们用的环境是用putty远程连接到日本Linux服务器.所以使程序在后台跑有以下三个好处: 1:我们这边是否关 ...