layui多文件上传与PHP后端对接的解决方案 |
您所在的位置：网站首页 › layui文件上传 › layui多文件上传与PHP后端对接的解决方案 |
layui多文件上传与PHP后端对接的解决方案
|
layui多文件上传与PHP后端对接的解决方案
原创
漏刻有时 2021-07-30 16:18:21 博主文章分类：php ©著作权 文章标签 上传 json php 重传 上传文件 文章分类 PHP 前端开发 ©著作权归作者所有：来自51CTO博客作者漏刻有时的原创作品，请联系作者获取转载授权，否则将追究法律责任layui多文件上传与PHP后端对接的解决方案https://blog.51cto.com/lockdatav/3235839layui目前暂不支持批量上传（即同时上传多个），但支持添加多个文件（即一个一个上传）
版本：layui-v2.5.7 后端：php 外部文件引入 容器构建 选择多文件 文件名 大小 上传进度 操作 开始上传 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 = $(['' , '' + file.name + '' , '' + (file.size / 1014).toFixed(1) + 'kb' , '' , '' , '重传' , '删除' , '' , ''].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 |
【本文地址】
今日新闻 |
推荐新闻 |