前端html代码

<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button>
<span class="num_pic"></span>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th id="pic">图片预览</th>
<th>大小</th>
<th>状态</th>
<th id="cao">操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<span class="num_pic"></span>
</div>

js 代码

<script type="text/javascript">
layui.use('upload', function() {
var $ = layui.jquery,
upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList'),
uploadListIns = upload.render({
elem: '#testList',
url: "{url('pic/index/upload')}",
accept: 'images',
acceptMime: 'image/*',
size: 8192,
multiple: true,
number: 400,
auto: false,
exts: 'jpg|png|jpeg',
bindAction: '#testListAction',
choose: function(obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result) {
var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td><img src="' + result + '" alt="' + file.name + '" style="width: 100px;height: 40px;"></td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function() {
obj.upload(index, file);
$("#upload-" + index).find("td").eq(2).html((file.size / 1014).toFixed(1) + 'kb');
}); //删除
tr.find('.demo-delete').on('click', function() {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
}); demoListView.append(tr);
$(".num_pic").text("总共【" + demoListView.find("tr").length + "】张图片");
});
}, done: function(res, index, upload) {
if(res.code == 0) { //上传成功
$("#cao").text("地址");
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
tds.eq(4).html('<input type="text" name="imgs[]" value="' + res.file + '" class="layui-input" />'); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
},
allDone: function(obj) { //当文件全部被提交后,才触发
layer.msg("上传文件数量:【" + obj.total + "】张,上传成功:【" + obj.successful + "】张,失败:【" + obj.aborted + "】", {
time: 3000
});
console.log(obj.total); //得到总文件数
console.log(obj.successful); //请求成功的文件数
console.log(obj.aborted); //请求失败的文件数
},
error: function(index, upload) {
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
}); });
</script>

后端代码

public function uploadAction(){
$file=$_FILES['file'];
$root_url = 'uploadfiles/pic/image/';
if (!is_uploaded_file($file['tmp_name'])){
$data = array('code'=>1,'msg'=>"错误");
exit(json_encode($data,0));
}
/* $root_url.=date('Ymd').'/';*/ $ext = pathinfo($file['name']);
$num=makenum($this->memberinfo['id']);
$root_url.=$num.'/';
if (!is_dir($root_url)) {
mkdir($root_url,0777, true);
}
$pa=file_list::get_file_list($root_url);
$na=count($pa) + 1;
if ($na<10){
$name=$num.'-000'.$na;
}elseif($na<100){
$name=$num.'-00'.$na;
}elseif($na<1000){
$name=$num.'-0'.$na;
}else{
$name=$num.'-'.$na;
}
$n=$root_url.$name.".".$ext['extension'];
$result=move_uploaded_file($file['tmp_name'],$n);
if ($result){
exit(json_encode(array("code"=>0,"msg"=>"ok","file"=>$n,"size"=>$file['size']),0));
}else{
exit(json_encode(array("code"=>1,"msg"=>"false","file"=>$n,"size"=>$file['size']),0));
}
}

上传效果:

转载:https://blog.csdn.net/qq_24562495/article/details/84785914(原文)

php结合layui前端实现 多图上传的更多相关文章

  1. layui中的多图上传

    效果展示: 1.html部分: 注:<input> 作为隐藏域,用于保存多图上传的资源数组,方便后期进行 form 表单的提交 <input type="hidden&qu ...

  2. [PHP] layui实现多图上传,图片自由排序,自由删除

    实现效果如下图所示: 实现代码: css代码 <style> .layui-upload-img { width: 90px; height: 90px; margin: ; } .pic ...

  3. layui多图上传实现删除功能

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-up ...

  4. layui多图上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 多图上传控制器及模型代码(2)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

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

  6. thinkphp+layui多图上传(1)thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。

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

  7. ueditor编辑器多图上传为什么顺序打乱了

    我上一个版本用的是ueditor1.3.6,自从1.4.2版以后,“前端上传模块统一改用webuploader”,ueditor在多图上传一直考虑漏掉了图片顺序的问题. 我的网站在用户上传图片文章的时 ...

  8. Laravel5多图上传和Laravel5单图上传的功能实现

    Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之 ...

  9. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传,只能单张单张图片地上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

随机推荐

  1. Oracle数据仓库套件

    OBIEE RPD:定义不同分析的主题角度,确定相应的事实表和维度表 报表层:选取需要的维度和度量,根据筛选器选取需要的数据 可视化:用图形展示数据,支持常见的图形:如折线图,饼图,堆叠图等. ODI ...

  2. React项目中跨域问题的解决方案

    刚刚找到到通过creat-react-app创建的项目中跨域问题的解决方案,记录下来以备后用. 如果接口地址为:    http://my.example.com/eg-api  则配置package ...

  3. 解决eclipse使用tomcat启动项目后访问项目404的问题

    今天启动项目的时候发现项目启动没有问题,但是一直访问不到页面,F12发现根本没有交互,百度后解决了,故记下来为以后提供方法,若有不同的解决方法,欢迎指教 1.首先要确保你的tomcat下没有项目,怎么 ...

  4. Mac os系统gdb调试器的安装与使用

    Mac os系统gdb调试器的安装与使用 1.简介 Mac os下的Terminal 终端中默认情况下并没有安装gdb调试器,但是可以通过gcc编译器进行代码编译,如果出错了就需要通过gdb调试器进行 ...

  5. Windows 上安装 Azure PowerShell及Azure PowerShell部署虚拟机

    一.Azure PowerShell部署   1.使用 PowerShellGet 在 Windows 上安装 Azure PowerShell 从 Azure PowerShell 版本 6.0 开 ...

  6. 【译著】Code First :使用Entity. Framework编程(5)

    第五章 对数据库映射使用默认规则与配置 到目前为止我们已经领略了Code First的默认规则与配置对属性.类间关系的影响.在这两个领域内,Code First不仅影响模型也影响数据库.在这一章,你将 ...

  7. ROS * 了解学习urdf的内容格式及编写

    <?xml version="1.0" ?> 声明文件使用xml描述 <robot name="robot_name">定义这是一个机器 ...

  8. pycharm汉化补丁

    将压缩包内容复制到 x:\xxx\JetBrains\PyCharm Community Edition 2019.1\lib 目录下 链接:https://pan.baidu.com/s/1TLEP ...

  9. Pagedown learning notes

    Pagedown Links Google wiki page Download Markdown.Converter.js var converter = new Markdown.Converte ...

  10. 软件开发者路线图梗概&书摘chapter6

    安排你的课程:靠自己去寻求建议,安排课程 1.阅读列表:维护一张列表,更新未读和已读 保存在公共空间 得出模式.趋势.缺口,决定下一步,得到建议 参考书目形成优先级队列 从宽泛的读起,指导者推荐 能使 ...