layui目前暂不支持批量上传(即同时上传多个),但支持添加多个文件(即一个一个上传)
版本:layui-v2.5.7
后端:php
外部文件引入
<script src="js/layui/layui.js"></script> <link rel="stylesheet" href="js/layui/css/layui.css">
容器构建
<div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button> <div class="layui-upload-list" style="max-width: 1000px;"> <table class="layui-table"> <colgroup> <col> <col width="150"> <col width="260"> <col width="150"> </colgroup> <thead> <th>文件名</th> <th>大小</th> <th>上传进度</th> <th>操作</th> </thead> <tbody id="demoList"></tbody> </table> </div> <button type="button" class="layui-btn" id="testListAction">开始上传</button> </div>
JS核心上传
layui.use(['upload', 'element', 'layer'], function () { var $ = layui.jquery , upload = layui.upload , element = layui.element , layer = layui.layer; //演示多文件列表 var uploadListIns = upload.render({ elem: '#testList' , elemList: $('#demoList') //列表元素对象 , url: 'http://test.com/get.php' , accept: 'file' , multiple: true , number: 10 , auto: false , bindAction: '#testListAction' , choose: function (obj) { var that = this; var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列 //读取本地文件 obj.preview(function (index, file, result) { var tr = $(['<tr id="upload-' + index + '">' , '<td>' + file.name + '</td>' , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>' , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></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); }); //删除 tr.find('.demo-delete').on('click', function () { delete files[index]; //删除对应的文件 tr.remove(); uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 }); that.elemList.append(tr); element.render('progress'); //渲染新加的进度条组件 }); } , done: function (res, index, upload) { //成功的回调 var that = this; console.log(res); if (res.code == 0) { //上传成功 var tr = that.elemList.find('tr#upload-' + index), tds = tr.children(); tds.eq(3).html(''); //清空操作 delete this.files[index]; //删除文件队列已经上传成功的文件 return; } this.error(index, upload); } , allDone: function (obj) { //多文件上传完毕后的状态回调 var json = JSON.stringify(obj); console.log(json); } , error: function (index, upload) { //错误回调 var that = this; var tr = that.elemList.find('tr#upload-' + index) , tds = tr.children(); tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传 } , progress: function (n, elem, e, index) { element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比 } }); });
后端PHP
<?php $dir = "uploadFile/"; //初始化返回数组 $arr = array( 'code' => 0, 'msg' => '', 'data' => array( 'src' => $dir . $_FILES["file"]["name"] ), ); $file_info = $_FILES['file']; $file_error = $file_info['error']; $file = $dir . $_FILES["file"]["name"]; if (!file_exists($file)) { if ($file_error == 0) { if (move_uploaded_file($_FILES["file"]["tmp_name"], $dir . $_FILES["file"]["name"])) { $arr['msg'] = "上传成功"; } else { $arr['msg'] = "上传失败"; } } else { switch ($file_error) { case 1: $arr['msg'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值'; break; case 2: $arr['msg'] = '超过了表单max_file_size限制的大小'; break; case 3: $arr['msg'] = '文件部分被上传'; break; case 4: $arr['msg'] = '没有选择上传文件'; break; case 6: $arr['msg'] = '没有找到临时文件'; break; case 7: case 8: $arr['msg'] = '系统错误'; break; } } } else { $arr['code'] = "1"; $arr['msg'] = "当前目录中,文件" . $file . "已存在"; } $res = json_encode($arr); die($res);
控制台输入信息