分类目录归档:layui+thinkphp5

layui和tp5的结合,快速开发中的一些有用经验和一些代码段,小轮子

layui+tp5 多文件上传

前端页面

参赛文件

文件名 大小 上传进度 操作


js

//演示多文件列表
var navArr=[];
var uploadListIns = upload.render({
elem: ‘#testList’
,elemList: $(‘#demoList’) //列表元素对象
,url: ‘/index/creative/upload2’ //此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。
,accept: ‘file’
,multiple: true
,number: 3
,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;
//if(res.code == 0){ //上传成功
var tr = that.elemList.find(‘tr#upload-‘+ index)
,tds = tr.children();
tds.eq(3).html(”); //清空操作
delete this.files[index]; //删除文件队列已经上传成功的文件

// navArr[]上面外面定义空数组
navArr.push(res.message); //返回的文件地址 存进数组

console.log(JSON.stringify(navArr))
console.log(typeof JSON.stringify(navArr))

$(“.filess”).val(navArr.toString());
// $(“.filess”).attr(“value”,JSON.stringify(navArr));

return;
//}
this.error(index, upload);
}
,allDone: function(obj){ //多文件上传完毕后的状态回调
// console.log(obj)
}
,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){ //注意:index 参数为 layui 2.6.6 新增
element.progress(‘progress-demo-‘+ index, n + ‘%’); //执行进度条。n 即为返回的进度百分比
}
});

php控制器:
public function upload2(){
// var_dump(phpinfo());die;
$base_path = $_SERVER[‘DOCUMENT_ROOT’].”/Uploads/company/”; // 接收文件目录
$newFileName = date(“Ymds”,time()).’_’.$_FILES[‘file’][‘name’];
$target_path = $base_path . $newFileName;
$oldFileName = $_FILES[‘file’][‘name’];

// dump($_FILES);die();
if (move_uploaded_file($_FILES[‘file’][‘tmp_name’],$target_path)) {
$array = array (
“code” => “1”,
// “message” =>$target_path,
// “oldname” => $_FILES[‘file’][‘name’]
//”message” => DS.”Uploads”.DS.”company”.DS.$newFileName.”|”.$oldFileName
“message” => $newFileName.”|”.$oldFileName
);
echo json_encode($array);
} else {
$array = array (
“code” => “0”,
“message” => “There was an error uploading the file, please try again!”.$_FILES[‘file’][‘error’]);
echo json_encode($array);
}
}