layui多文件上传与PHP后端对接的解决方案

layui目前暂不支持批量上传（即同时上传多个），但支持添加多个文件（即一个一个上传）

版本：layui-v2.5.7 后端：php

外部文件引入

<script src="js/layui/layui.js"> 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 = $(['+ index + '">' , '' + file.name + '' , '' + (file.size / 1014).toFixed(1) + 'kb' , '
		

			+ index + '">
			

				
			

		
' , '' , '重传' , '删除' , '' , ''].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

 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); 

控制台输入信息