如下layui+php后台用于上传多文件，有前后台如下。文件上传至服务器的myfile文件夹，同时文件名和文件地址写入mysql的表table1，如文件 姓名.pdf 上传到mysql，file_name:姓名，file_address：.\myfile\姓名.pdf
mysql table：
CREATE TABLE users (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
file_name VARCHAR(50) NOT NULL,
date DATE,
file_address VARCHAR(255) NOT NULL UNIQUE
)ENGINE=InnoDB DEFAULT CHARSET=utf8;
<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<style>
.selectUp .layui-form-select dl{
top: auto;
bottom: 36px;
}
</style>
</head>
<body>
<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>
<script>
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: 'upload_do.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 即为返回的进度百分比
}
});
});
</script>
</body>
</html>
upload_do.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);
