tp5 + layui 上传图片[支持单张和多张 ]

在以前项目中遇到有上传图片都是用 web Uploader插件上传，因为我现在项目都在使用 layui 所以今天趁着有时间写一个tp5结合layui上传图片的demo

我用的是Tinkphp5.1版本 layui用的是2.1.1 废话不多说代码如下：

下面的是html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tp5 + layui 上传图片</title><link rel="stylesheet" href="/static/plugins/layui/css/layui.css"><script src="/static/jquery-1.10.2.min.js"></script><script src="/static/plugins/layui/layui.js"></script><style type="text/css">.box{margin-top: 10%;margin-bottom: 10px;color: #FF5722;font-size: 18px;margin-left: 45%;}.box1{width: 900px;height: 500px;margin-left: auto;border:solid  1px;margin-right:auto;}.box1 .controls{margin-left: 45%;margin-top: 20%;}.upload-pre-item{position: relative;}.upload-pre-item .img{margin-top: 5px;width: 116px;height: 76px;}.upload-pre-item i {position: absolute;cursor: pointer;top: 9px;right: 356px;background: #2F4056;padding: 2px;line-height: 15px;text-align: center;color: #fff;margin-left: 1px;/* float: left; */filter: alpha(opacity=80);-moz-opacity: .8;-khtml-opacity: .8;opacity: .8;transition: 1s;}.upload-pre-item i:hover{transform:rotate(360deg);}</style>
</head>
<body>
<div class="box"><span style="">tp5 + layui 上传图片</span></div>
<div class="box1"><div class="controls need-img"><button type="button" class="layui-btn layui-btn-primary" id="upload_img_icon">上传图片</button><div class="upload-img-box"></div></div>
</div>
<script>var upurl = "{:url('Index/Index/upload')}"; //上传图片地址
    layui.use(['layer','upload'], function(){var layer = layui.layer;var upload = layui.upload;upload.render({ //上传图片
            elem: '#upload_img_icon',url: upurl,multiple: true, //是否允许多文件上传。设置 true即可开启。不支持ie8/9
            before: function(obj) {layer.msg('图片上传中...', {icon: 16,shade: 0.01,time: 0})},done: function(res) {layer.close(layer.msg());$('.upload-img-box').append('<dd class="upload-icon-img"><div class="upload-pre-item"><i οnclick="deleteImg($(this))" class="layui-icon"></i><img src="' + res.data + '" class="img" ><input type="hidden" name="icon" value="' + res.data + '" /></div></dd>');},error: function(){layer.msg('上传错误！');}});});function deleteImg(obj){obj.parent().parent('.upload-icon-img').remove();}
</script>
</body>
</html>

因为是demo 所以我就把他上传到Index模块index控制器里面了，下面是php代码我用的是tp5.1的

    public function upload(){$pathName  =  $this->request->param('path');//图片存放的目录$file = request()->file('file');$path =  'static/uploads/images/' . (!empty($pathName) ? $pathName : 'img');if(!is_dir($path)){mkdir($path, 0755, true);}$info = $file->move($path);if ($info && $info->getPathname()) {$data = ['status' => 1,'data' =>  '/'.$info->getPathname(),];echo exit(json_encode($data));} else {echo exit(json_encode($file->getError()));}}

如果需要复制上面的html代码需要引入 jquery 和 layui ！！！！！！！！！！！！！！！！！！！！

楼主只写了一些简单的图片上传以及删除有兴趣的可以写一下图片上传以后图片左右移动，如果有需要tp3.2版本 + layui的上传图片可以在下方留言楼主会抽时间也附上tp3.2的，最后这里附上layui官方 upload上传图片文档的传送门：http://www.layui.com/doc/modules/upload.html

单图上传效果：

多图上传效果：

本文为作者原创文章,转载无需和我联系,但请注明来自：http://www.cnblogs.com/kzfbk/p/8660582.html

转载于:https://www.cnblogs.com/kzfbk/p/8660582.html

tp5 + layui 上传图片[支持单张和多张 ]相关推荐

【OpenCV】132 OpenCV DNN单张与多张图像的推断
132 OpenCV DNN单张与多张图像的推断代码 import cv2 as cv import numpy as npbin_model = "../models/googlenet ...
OpenCV DNN单张与多张图像的推断
转载请注明作者和出处: http://blog.csdn.net/john_bh/ 文章目录 1. blobFromImage与blobFromImages 2. 代码实现 2.1 C++ 2.2 P ...
使用 photo-sphere-viewer.js 浏览单张和六张的全景图
photo-sphere-viewer.js是一个用于显示照片球面全景图的JavaScript库,是一个基于three.js的全景插件. 示例 http://ithanmang.com/taskdat ...
上传图片的方法（单张或者多张）
1:多个图片上传版本 <div class="pclogo"><img v-show="!fileimg" src="@/asset ...
SpringBoot+layUI上传图片功能
1:首先在项目的pom文件中添加两个依赖  <dependency><groupId>commons-fileupload</g ...
layui上传图片，前端直接拷代码，后端……
大家好,我是雄雄,欢迎关注公众号[雄雄的小课堂]. 最近实在是忙的抽不开身,并且身上也出现了一堆的毛病,今天牙疼,明天脊椎疼,然后接着又头疼--年纪轻轻的,咋这么多毛病呢?我也在坚持锻炼呢-- 今天给 ...
layui.upload php后端,layui上传图片PHP后台接收并返回网址
最近Sham在优化自己的小程序后台,应该有提过我选用的layui作为后台界面前端,这几天碰到一个问题,就是在使用layui来上传图片的时候,直接使用小程序接受图片的PHP文件无法接收保存,layui也 ...
layui 上传图片校验
layui地址[添加链接描述](https://www.layui.com/doc/modules/upload.html)![在这里插入图片描述](https://img-blog.csdnimg. ...
layui上传图片需携带额外参数
最近项目中遇到上传图片需携带跳转链接额外参数的问题困扰很久得到解决现记录如下充分了解layui upload.js组件中的三个状态 choose,before,done choose)表示文件选择后 ...

tp5 + layui 上传图片[支持单张和多张 ]

tp5 + layui 上传图片[支持单张和多张 ]相关推荐

最新文章

热门文章